利用CSS3实现的文字定时向上滚动


Posted in HTML / CSS onAugust 29, 2016

话不多说,直接上实例代码

复制代码
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>moveUp</title>
<style>
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;}
}</p> <p> @-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; }
</style>
</head>
<body>
<div class="container">
<div class="li-box">
<ul>
<li>飞鲨勇士张超:曾驾歼-8战机逼退外军侦察机</li>
<li>台媒炒作大陆军机飞临台海 台军方:全程监控</li>
<li>菲总统对华为何晴转阴:先期待“访华”后欲“清算中国”</li>
<li>外媒称韩国醉心中等强国地位 屡次在关涉中国时遇挫</li>
<li>伊朗官方回应日本驻伊大使被扣押:没有的事儿</li>
<li>菲总统对华为何晴转阴:先期待“访华”后欲“清算中国”</li>
</ul>
</div>
</div>
</body>
</html>

以上就是这篇文章的全部内容,希望本文对大家的学习和工作能带来一定的帮助。

HTML / CSS 相关文章推荐
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 #HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 #HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 #HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 #HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 #HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 #HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 #HTML / CSS
You might like
php抓取https的内容的代码
2010/04/06 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
jquery 指南/入门基础
2007/11/30 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
vue2.0全局组件之pdf详解
2017/06/26 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
python批量替换多文件字符串问题详解
2018/04/22 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
详解python 中in 的 用法
2019/12/12 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
美国在线购物频道:Shop LC
2019/04/21 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
UNIX特点都有哪些
2016/04/05 面试题
小学生打架检讨书
2014/01/26 职场文书
大学生求职信范文
2014/05/24 职场文书
总经理检讨书
2014/09/15 职场文书
临时租车协议范本
2014/09/23 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
写给父母的感谢信
2015/01/22 职场文书
试用期自我评价范文
2015/03/10 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
Java SSM配置文件案例详解
2021/08/30 Java/Android
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript