用css实现滚动效果,css滚动条属性
前言
通知栏组件是一个比较常见的组件了，基本上每个站点都会有怎么个组件，主要就是通告站点的一些变化或者是告知一些中奖名单等作用。
最近在复习CSS3动画部分内容，想着平时通知栏组件大部分还是用射流研究…来实现，正好拿这块组件来当复习，下面写了三个小例子在此分享，欢迎大家观看，如有疑问，欢迎留言评论哈。
第一种
HTML部分
div class= notice div class= notice _ _ inner div class= notice _ _ box div class= notice _ _ item 恭喜会员用户nbsp span style= color:red；橙某人/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；小密圈圈/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；库克_/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；爱音乐网站/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；青年之声/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；仙人/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；三十万人编号/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；Maboroshii/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；陈亚明/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；老娘终于发达了/spannbsp .中奖/div/div div class= notice _ _ box div class= notice _ _ item 恭喜会员用户nbsp span style= color:red；橙某人/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；小密圈圈/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；库克_/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；爱音乐网站/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；青年之声/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；仙人/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；三十万人编号/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；Maboroshii/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；陈亚明/spannbsp .中奖/div div class=notice__item 恭喜会员用户nbsp span style= color:red；老娘终于发达了/spannbsp .中奖/div /div /div/divCSS部分。注意{宽度：300 px高度：300像素边框半径：8px边框：1px纯色# eee边距：100像素自动；}.通知_ _内部{宽度：100%;身高：100%;溢出：隐藏；字体大小：14px颜色：# 666;}.注意__box{ animation: roll 10s线性无限；}.通知_ _项{宽度：100%;高度：30px行高：30px填充：0 12px空白：nowrap} @关键帧roll { 0% { transform:translate y(0)；} 100% { transform:平移y(-300 px)；}}
视口容器高度需要固定，超出视口容器隐藏内容；为了营造出无缝滚动回来，内容需要准备两份，彼此紧随；通过移动内层翻译实现滚动效果；在第一份内容完全滚出视口容器的一瞬间，立刻将内容位置进行复原；通过无限来循环此过程；
第二种
HTML部分
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 class= notice _ _ item 快速简洁地解释Vue中v-for循环键的作用/Div class= notice _ _ item 调用以及Apply函数的分析和手写实现/div div class=notice__item 一年的通用图片裁剪掘金年度短文/div div class=notice__item 你需要知道的浏览器缓存(即HTTP缓存)在。注意{ width:600 px；高度：40px边框半径：8px边框：1px纯色# eee边距：100px自动；溢出：隐藏；}.注意__inner{ animation: roll 36s线性无限；页边距-顶部：0}。notice _ _ item { font-size:14px；高度：40px行高：40px填充：0 12px空白：nowrap文本装饰：下划线；} @关键帧滚动{ 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:-120 px；} 32% { margin-top:-120 px；} 36% { margin-top:-160 px；} 40% { margin-top:-160 px；} 44% { margin-top:-200 px；} 48% { margin-top:-200 px；} 52% { margin-top:-240 px；} 56% { margin-top:-240 px；} 60% { margin-top:-200 px；} 64% { margin-top:-200 px；} 68% { margin-top:-160 px；} 72% { margin-top:-160 px；} 76% { margin-top:-120 px；} 80% { margin-top:-120 px；} 84% { margin-top:-80px；} 88% { margin-top:-80px；} 92% { margin-top:-40px；} 96% { margin-top:-40px；} 100% { margin-top:0；}} }}(gif录制可能有点短，建议你自己试试)
这种旋转木马是一种常见的形式，也是一种实用、完美和简单的形式。对了，在微信小程序上用swiper组件更简单快捷(别问我怎么知道的-。-).
视口容器的高度需要固定，超出视口容器的隐藏内容；通过移动内边距-top实现滚动效果(translateY也是一样，全部替换即可)；需要注意的是，我从上面的HTML部分知道我有七个通知内容，所以@keyframes中的margin-top只移动了七次，然后又回去了。如果添加了第八个通知内容，我们必须相应地调整值；
第三种
HTML部分
notice div class= notice _ _ inner Span class= notice _ _ item notice _ _ item-first Vue是一个渐进式JavaScript框架/Span class= notice _ _ item notice _ _ item-second Vue是一个渐进式JavaScript框架/span /div/divCSS部分。注意{ width:600 px；高度：40px边框半径：8px边框：1px纯色# eee边距：100px自动；溢出：隐藏；}.通知_ _内部{高度：100%；字体大小：14px颜色：# 333；行高：40px空白：nowrap位置：相对；}.notice _ _ item { position:absolute；top:0；左：100%；身高：100%；}.notice _ _ item-first { padding-right:70%；动画：rollFirst 25s线性无限；}.notice _ _ item-second { padding-right:53%；动画：rollSecond 25s线性12s无限；} @ key frames roll first { 0% { transform:translate x(0)；} 100% { transform:translate x(-200%)；} } @ key frames roll second { 0% { transform:translate x(0)；} 100% { transform:translate x(-200%)；}}这种滚动通知栏也是常见的。它的麻烦点是空白区间不好控制，尤其是有多个通知内容的时候。当然，用JS实现更好。现在也有很多插件可以直接开箱使用。
视口容器高度不需要固定，不依赖且不超出视口容器的隐藏内容；用padding-right做空格，单位是百分比；需要准备两份内容，第二份内容的出现要用动画延迟(animation-delay)来延迟。这里还有一个思路是直接移动内部容器的translateX，和第一个一样。
小结
看到这里，你是不是跃跃欲试？没有吗？好的。
纯HTML CSS肯定没有JS灵活，但是上面的例子还是很适合一些固定的文案场景，也适合在开发阶段快速做出交互效果。
关于纯CSS实现的通知栏三种滚动效果的这篇文章到此为止。更多相关CSS通知栏内容，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。