纯CSS实现的三种通知栏滚动效果
网站建设 2023-01-28 21:39www.1681989.com免费网站
前言
通知栏组件是一个比较常见的组件了，基本上每个站点都会有怎么个组件，主要就是通告站点的一些变化或者是告知一些中奖名单等作用。
最近在复习CSS3动画部分内容，想着平时通知栏组件大部分还是用JS来实现，正好拿这块组件来当复习，狼蚁网站SEO优化写了三个小例子在此分享，欢迎大家观看，如有疑问，欢迎留言评论哈。
第一种
HTML部分
<div class="notice">
<div class="notice__ner">
<div class="notice__box">
<div class="notice__item">恭喜会员用户 <span style="color: red;">橙某人</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">小密圈圈</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">Cooke_</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">爱音乐网站</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">青年之声</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">仙人</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">三十万人编号</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">Maboroshii</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">陈亚明</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">老娘终于发达了</span> 中奖</div>
</div>
<div class="notice__box">
<div class="notice__item">恭喜会员用户 <span style="color: red;">橙某人</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">小密圈圈</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">Cooke_</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">爱音乐网站</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">青年之声</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">仙人</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">三十万人编号</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">Maboroshii</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">陈亚明</span> 中奖</div>
<div class="notice__item">恭喜会员用户 <span style="color: red;">老娘终于发达了</span> 中奖</div>
</div>
</div>
</div>
CSS部分
.notice{
width: 300px;
height: 300px;
border-radius: 8px;
border: 1px solid #eee;
marg: 100px auto;
}
.notice__ner{
width: 100%;
height: 100%;
overflow: hidden;
font-size: 14px;
color: #666;
}
.notice__box{
animation: roll 10s lear fite;
}
.notice__item{
width: 100%;
height: 30px;
le-height: 30px;
paddg: 0 12px;
white-space: nowrap;
}
@keyframes roll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-300px);
}
}
- 视口容器高度需要固定，超出视口容器隐藏内容；
- 为了营造出无缝滚动回来，内容需要准备两份，彼此紧随；
- 通过移动内层translateY实现滚动效果；
- 在第一份内容完全滚出视口容器的一瞬间，立刻将内容位置进行复原；
- 通过fite来循环此过程；
第二种
HTML部分
<div class="notice">
<div class="notice__ner">
<div class="notice__item">HTTP升级HTTPS全过程，Ngx配置平滑升级</div>
<div class="notice__item">一台电脑存在多个版本的Vuecli，方便快速初始化不同版本的Vue项目</div>
<div class="notice__item">前端模块化规范定义-不同规范下的导入导出</div>
<div class="notice__item">快速、简洁讲明Vue中v-for循环key的作用</div>
<div class="notice__item">Call与Apply函数的分析及手写实现</div>
<div class="notice__item">普通切图仔的一年 | 掘金年度征文</div>
<div class="notice__item">前端需要了解的浏览器缓存（即HTTP缓存）| 🏆 技术专题第八期征文</div>
</div>
</div>
CSS部分
.notice{
width: 600px;
height: 40px;
border-radius: 8px;
border: 1px solid #eee;
marg: 100px auto;
overflow: hidden;
}
.notice__ner{
animation: roll 36s lear fite;
marg-: 0
}
.notice__item{
font-size: 14px;
height: 40px;
le-height: 40px;
paddg: 0 12px;
white-space: nowrap;
text-decoration: underle;
}
@keyframes roll {
0% {
marg-: 0;
}
4% {
marg-: 0;
}
8% {
marg-: 0;
}
12% {
marg-: -40px;
}
16% {
marg-: -40px;
}
20% {
marg-: -80px;
}
24% {
marg-: -80px;
}
28% {
marg-: -120px;
}
32% {
marg-: -120px;
}
36% {
marg-: -160px;
}
40% {
marg-: -160px;
}
44% {
marg-: -200px;
}
48% {
marg-: -200px;
}
52% {
marg-: -240px;
}
56% {
marg-: -240px;
}
60% {
marg-: -200px;
}
64% {
marg-: -200px;
}
68% {
marg-: -160px;
}
72% {
marg-: -160px;
}
76% {
marg-: -120px;
}
80% {
marg-: -120px;
}
84% {
marg-: -80px;
}
88% {
marg-: -80px;
}
92% {
marg-: -40px;
}
96% {
marg-: -40px;
}
100% {
marg-: 0;
}
}
（gif录制可能稍微短了一点，建议动手试试看哦）
这种轮播的形式是比较常见的一种，也是比较实用完善简单的一种，随便提一句在微信小程序上用swiper组件去实现比较简单快捷（不要问我怎么知道的-.-）。
- 视口容器高度需要固定，超出视口容器隐藏内容；
- 通过移动内层marg-实现滚动效果（用translateY也一样，全部替换一下就行）；
- 需要注意的是，从上面HTML部分知道我有七个通知内容，所以在@keyframes中的marg-是移动七次而已，之后就回走，如果添加了第八个通知内容，我们要对应调整其中的数值；
第三种
HTML部分
<div class="notice">
<div class="notice__ner">
<span class="notice__item notice__item-first">Vue是一个渐进式的 JavaScript 框架</span>
<span class="notice__item notice__item-second">Vue是一个渐进式的 JavaScript 框架</span>
</div>
</div>
CSS部分
.notice{
width: 600px;
height: 40px;
border-radius: 8px;
border: 1px solid #eee;
marg: 100px auto;
overflow: hidden;
}
.notice__ner{
height: 100%;
font-size: 14px;
color: #333;
le-height: 40px;
white-space: nowrap;
position: relative;
}
.notice__item{
position: absolute;
: 0;
left: 100%;
height: 100%;
}
.notice__item-first{
paddg-right: 70%;
animation: rollFirst 25s lear fite;
}
.notice__item-second{
paddg-right: 53%;
animation: rollSecond 25s lear 12s fite;
}
@keyframes rollFirst {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
@keyframes rollSecond {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
这种滚动通知栏也是比较常见的一种，它比较麻烦的一点就是那个空白间隔不好控制，特别在多个通知内容的时候，用JS还是比较好实现的，现在也有很插件可以直接开箱就用啦。
- 这种视口容器高度就不需要固定了，它并不依赖，超出视口容器隐藏内容；
- 利用paddg-right来制造空白间隔，以百分比为单位；
- 内容需要准备两份，通过animation-delay来延时第二份内容的出现，这里也有另一个思路就是直接来移动内层容器的translateX，与第一种是一样的道理；
小结
看到这里，跃跃欲试了吗？ 没有？ 行吧。
单纯的HTML+CSS肯定是没有JS那么灵活，但以上例子还是很适合一些固定好文案的场景，也适合在开发阶段快速做出交互效果。
到此这篇关于纯CSS实现的三种通知栏滚动效果的文章就介绍到这了,更多相关CSS通知栏内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章，希望大家以后多多支持狼蚁SEO！
上一篇：CSS实现TikTok文字抖动效果示例
下一篇：一文教你玩转CSS 组合选择器
网站设计
- 静宁会SEO的网站建设公司：全面提升您的网络影
- 提升在线业务的关键：选择最佳的丽水网站建设
- 浙江网站优化发展潜力如何
- 井研专业的网站建设公司：打造您的在线品牌
- 灵山SEO网站建设公司：提升您的在线业务表现
- 蒙城网站建设优化公司：提升您网站表现的理想
- 阳谷企业网站优化：提升线上业务力的关键
- 樟树专业的网站建设公司：打造您在线业务的坚
- 通河百度SEO排名的策略与技巧
- 重庆百度快照排名如何进行精准的客户引流
- 重庆百度快照排名
- 常宁便宜的建站公司：助您轻松打造在线业务
- 巫溪百度网站优化：提升网站曝光率与流量的关
- 湖北整站优化怎么做才能放大客户需求
- 闸北网站建设多少钱？全面解析与预算规划
- 辽宁企业网站优化怎么做电话营销