利用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动画按钮的实例教程
Nov 21 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
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
神族 Protoss 历史背景
2020/03/14 星际争霸
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
php文件操作相关类实例
2015/06/18 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
PHP7修改的函数
2021/03/09 PHP
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
javascript中Function类型详解
2015/04/28 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
Nodejs如何复制文件
2016/03/09 NodeJs
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
python将ip地址转换成整数的方法
2015/03/17 Python
20招让你的Python飞起来!
2016/09/27 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
python常见排序算法基础教程
2017/04/13 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
销售员岗位职责
2014/06/09 职场文书
三潭印月的导游词
2015/02/12 职场文书
入党申请书怎么写?
2019/06/11 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python