大家以前基本是用javascript来实现文字定时向上滚动的效果，那么今天给大家分享下利用css3来实现这一效果，有需要的可以参考学习。
话不多说，直接上实例代码
moveUp ul,li{ margin:0; padding:0; } li{ list-style:none; } .container{ display:inline-block; background:#efefef; padding:10px; border:1px solid #ccc; font-family:"Microsoft YaHei"; } .container .li-box{ height:28px; overflow:hidden; } .container ul{ position:relative; animation: moveUp 8s 0.6s infinite; -webkit-animation: moveUp 8s 0.6s infinite; } @keyframes moveUp { 0% {top:0px;} 18% {top:0px;} 20% {top:-28px;} 38% {top:-28px;} 40% {top:-56px;} 58% {top:-56px;} 60% {top:-84px;} 78% {top:-84px;} 80% {top:-112px;} 98% {top:-112px;} }@-webkit-keyframes moveUp /*Safari and Chrome*/ { 0% {top:0px;} 18% {top:0px;} 20% {top:-28px;} 38% {top:-28px;} 40% {top:-56px;} 58% {top:-56px;} 60% {top:-84px;} 78% {top:-84px;} 80% {top:-112px;} 98% {top:-112px;} } .container li{ line-height:1.8; color:#666; }
- 飞鲨勇士张超：曾驾歼-8战机逼退外军侦察机
- 台媒炒作大陆军机飞临台海 台军方：全程监控
- 菲总统对华为何晴转阴：先期待“访华”后欲“清算中国”
- 外媒称韩国醉心中等强国地位 屡次在关涉中国时遇挫
- 伊朗官方回应日本驻伊大使被扣押：没有的事儿
- 菲总统对华为何晴转阴：先期待“访华”后欲“清算中国”
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
使用css样式制作的漂亮按钮
立即学习“前端免费学习笔记（深入）”；
css页面中左中右分栏布局的实现
以上就是利用CSS3实现的文字定时向上滚动的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610477.html
微信扫一扫 
支付宝扫一扫 
