利用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 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
python去除扩展名的实例讲解
2018/04/23 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
python打开使用的方法
2019/09/30 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Python如何实现远程方法调用
2020/08/07 Python
企业办公室主任岗位职责
2014/02/19 职场文书
银行委托书范本
2014/09/28 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
欢送领导祝酒词
2015/08/12 职场文书