利用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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 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获取网络文件的实现代码
2010/01/01 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
php Session无效分析资料整理
2016/11/29 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
使用python实现链表操作
2018/01/26 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python中的decorator的作用详解
2018/07/26 Python
python中正则表达式与模式匹配
2019/05/07 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
python3跳出一个循环的实例操作
2020/08/18 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
公司领导推荐信
2013/11/12 职场文书
2013届毕业生求职信范文
2013/11/20 职场文书
公司活动方案范文
2014/03/06 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
品德与社会教学反思
2016/02/24 职场文书