客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
前言通知栏组件是一个比较常见的组件了，基本上每个站点都会有怎么个组件，主要就是通告站点的一些变化或者是告知一些中奖名单等作用。 第一种HTML部分
<div class="notice">
<div class="notice__inner">
<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;
margin: 100px auto;
}
.notice__inner{
width: 100%;
height: 100%;
overflow: hidden;
font-size: 14px;
color: #666;
}
.notice__box{
animation: roll 10s linear infinite;
}
.notice__item{
width: 100%;
height: 30px;
line-height: 30px;
padding: 0 12px;
white-space: nowrap;
}
@keyframes roll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-300px);
}
}
第二种HTML部分
<div class="notice">
<div class="notice__inner">
<div class="notice__item">HTTP升级HTTPS全过程，Nginx配置平滑升级</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;
margin: 100px auto;
overflow: hidden;
}
.notice__inner{
animation: roll 36s linear infinite;
margin-top: 0
}
.notice__item{
font-size: 14px;
height: 40px;
line-height: 40px;
padding: 0 12px;
white-space: nowrap;
text-decoration: underline;
}
@keyframes roll {
0% {
margin-top: 0;
}
4% {
margin-top: 0;
}
8% {
margin-top: 0;
}
12% {
margin-top: -40px;
}
16% {
margin-top: -40px;
}
20% {
margin-top: -80px;
}
24% {
margin-top: -80px;
}
28% {
margin-top: -120px;
}
32% {
margin-top: -120px;
}
36% {
margin-top: -160px;
}
40% {
margin-top: -160px;
}
44% {
margin-top: -200px;
}
48% {
margin-top: -200px;
}
52% {
margin-top: -240px;
}
56% {
margin-top: -240px;
}
60% {
margin-top: -200px;
}
64% {
margin-top: -200px;
}
68% {
margin-top: -160px;
}
72% {
margin-top: -160px;
}
76% {
margin-top: -120px;
}
80% {
margin-top: -120px;
}
84% {
margin-top: -80px;
}
88% {
margin-top: -80px;
}
92% {
margin-top: -40px;
}
96% {
margin-top: -40px;
}
100% {
margin-top: 0;
}
}
（gif录制可能稍微短了一点，建议动手试试看哦） 这种轮播的形式是比较常见的一种，也是比较实用完善简单的一种，随便提一句在微信小程序上用swiper组件去实现比较简单快捷（不要问我怎么知道的-.-）。
第三种HTML部分
<div class="notice">
<div class="notice__inner">
<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;
margin: 100px auto;
overflow: hidden;
}
.notice__inner{
height: 100%;
font-size: 14px;
color: #333;
line-height: 40px;
white-space: nowrap;
position: relative;
}
.notice__item{
position: absolute;
top: 0;
left: 100%;
height: 100%;
}
.notice__item-first{
padding-right: 70%;
animation: rollFirst 25s linear infinite;
}
.notice__item-second{
padding-right: 53%;
animation: rollSecond 25s linear 12s infinite;
}
@keyframes rollFirst {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
@keyframes rollSecond {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
这种滚动通知栏也是比较常见的一种，它比较麻烦的一点就是那个空白间隔不好控制，特别在多个通知内容的时候，当然用JS还是比较好实现的，现在也有很插件可以直接开箱就用啦。
小结看到这里，跃跃欲试了吗？ 没有？ 行吧。 单纯的HTML+CSS肯定是没有JS那么灵活，但以上例子还是很适合一些固定好文案的场景，也适合在开发阶段快速做出交互效果。 到此这篇关于纯CSS实现的三种通知栏滚动效果的文章就介绍到这了,更多相关CSS通知栏内容请搜索极客世界以前的文章或继续浏览下面的相关文章，希望大家以后多多支持极客世界！ |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论