纯CSS做成通知公告滚动效果
发布时间：2022-04-20 09:01:15 所属栏目：语言 来源：互联网
导读：通知栏是我们比较常见的组件之一，我们在很多网站都能看到通知栏，这主要用来显示网站的通知和公告。有很多通知公告栏是滚动效果显示，那么这是怎样实现的呢？下面分享几个用纯CSS代码实现通知公告滚动效果，感兴趣的朋友一起来学习下吧。 第一种 HTML部分 d
|
通知栏是我们比较常见的组件之一，我们在很多网站都能看到通知栏，这主要用来显示网站的通知和公告。有很多通知公告栏是滚动效果显示，那么这是怎样实现的呢？下面分享几个用纯CSS代码实现通知公告滚动效果，感兴趣的朋友一起来学习下吧。 第一种 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; 视口容器高度需要固定，超出视口容器隐藏内容； 为了营造出无缝滚动回来，内容需要准备两份，彼此紧随； 通过移动内层translateY实现滚动效果； 在第一份内容完全滚出视口容器的一瞬间，立刻将内容位置进行复原； 通过infinite来循环此过程； 第二种 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> （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
