HTML部分

 <div class="box"><ul class="ul"><li><span class="ff">水果：</span><span>苹果、香蕉、橘子</span></li><li><span class="ff">茶：</span><span>龙井、茉莉花茶、红茶</span></li><li><span class="ff">文具：</span><span>中性笔、笔记本、尺子</span></li><li><span class="ff">颜色：</span><span>红色、绿色、蓝色</span></li><li><span class="ff">衣服：</span><span>外套、裤子、长袖</span></li></ul></div>

css部分

.box {width: 1000px;height: 90px;background-color: aqua;border: 2px solid blue;overflow: hidden;margin: 40px auto;position: relative;}.ul {width: 205%;height: 50px;position: absolute;    /* animation*/animation: move  20s  infinite linear;}/*  设置动画效果  */@keyframes move {0% {left: 0px;}100% {left: -2000px;}}.ul li {float: left;width: 320px;height: 50px;background-color: aquamarine;border: 1px solid blanchedalmond;border-radius: 10px;margin: 20px 50px 20px 0;padding-left: 20px;}.ul li span {font-size: 20px;color: blueviolet;line-height: 50px;}.ul li .ff {font-size: 24px;color: blue;line-height: 50px;}.box:hover .ul {/* 实现鼠标指上去停止滚动播放 */animation-play-state: paused;}</style>

实现效果

css 实现动画滚动相关推荐

一分钟实现纯CSS全屏滚动特效
一分钟实现纯CSS全屏滚动特效 Hello World [你好世界]-Hello World-"无论世界多么崩坏,我都只想再见到她的笑颜" 端午节快乐! 会用到的CSS属性 bac ...
1.CSS3 教程-＞多列布局＞ image模块＞ cssTransition 过渡＞ CSS Animations 动画＞ Transform二维
CSS3 教程多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维介绍 CSS3 是层叠样式表(Cascading Style S ...
使用css实现字幕滚动效果
使用css实现字幕滚动效果最近业务需要,让电子屏上面的横幅能够自动的滚动,但是用js加requireanimation实现的话感觉有点浪费,转念想到了用css 的animation似乎也能够实现大致 ...
html怎么设置文字滚动效果,css如何实现滚动文字，实现滚动文字的代码
css如何实现滚动文字,实现滚动文字的代码发布时间:2020-05-09 10:35:36 来源:亿速云阅读:228 作者:小新这篇文章主要为大家详细介绍了css如何实现滚动文字,实现滚动文字的 ...
简单的代码就能实现动画滚动？
开发工具与关键技术:DW中的HTML和CSS动画滚动作者:木有窝的鸟~小通撰写时间:2019年01月17日我们知道,利用代码实现能千姿百态动画效果,用思维创作动画效果缔造各种各样的作品,确让人感 ...
基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div clas ...
译-使用Scroll Snapping实现CSS控制页面滚动
特别声明,本文翻译自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文,受限于译者能力,译文或存在不足,欢迎大家指出.如需转 ...
暂停 CSS @keyframes 动画
让我们了解一下 CSS @keyframes 动画,关于如何暂停和控制动画的方法.有一个专门用于它的 CSS 属性,也可以使用 JavaScript 进行控制,但是细节上有很多细微差别. 我注意到一些 ...
css 悬停动画_CSS3缩放图像动画效果悬停
css 悬停动画 Today we will look into CSS3 Zoom Image animation effect with mouse on hover. With images b ...

css 实现动画滚动

HTML部分

css部分

实现效果

css 实现动画滚动相关推荐

最新文章

热门文章