利用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实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 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
其他功能
2006/10/09 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
jQuery的slideToggle方法实例
2013/05/07 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
pandas去除重复列的实现方法
2019/01/29 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
中职应届生会计求职信
2013/10/23 职场文书
自荐书4要点
2014/01/25 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2014年党支部工作总结
2014/11/13 职场文书
长征观后感
2015/06/09 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript
Hive日期格式转换方法总结
2022/06/25 数据库