利用CSS3實現的文字定時向上滾動
發(fā)布時間：2016-08-29 17:37:52 作者：佚名 
我要評論
我要評論大家以前基本是用Javascript來實現文字定時向上滾動的效果，那么今天小編給大家分享下利用CSS3來實現這一效果，有需要的可以參考學習。
話不多說，直接上實例代碼
復制代碼
代碼如下:<!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戰(zhàn)機逼退外軍偵察機</li>
<li>臺媒炒作大陸軍機飛臨臺海 臺軍方：全程監(jiān)控</li>
<li>菲總統(tǒng)對華為何晴轉陰：先期待“訪華”后欲“清算中國”</li>
<li>外媒稱韓國醉心中等強國地位 屢次在關涉中國時遇挫</li>
<li>伊朗官方回應日本駐伊大使被扣押：沒有的事兒</li>
<li>菲總統(tǒng)對華為何晴轉陰：先期待“訪華”后欲“清算中國”</li>
</ul>
</div>
</div>
</body>
</html>
以上就是這篇文章的全部內容，希望本文對大家的學習和工作能帶來一定的幫助。
相關文章
- 本文給大家介紹css代碼去掉select的下拉箭頭樣式的方法，代碼簡單易懂，需要的朋友可以參考下2016-09-02
- 這篇文章給大家總結一些關于CSS中Padding屬性不常用但很實用的用法，具有一定參考價值，有需要的可以來參考學習。2016-08-31
- 對于CSS，可能很多前端開發(fā)人員已經駕輕就熟了，有些人也許還在初學階段，不管怎樣，這幾個炫酷的CSS技巧你都不容錯過，對于大家開發(fā)前端很有幫助的。2016-08-30
- 今天小編給大家?guī)硪粋€小demo，使用純css3代碼實現switch滑動開關按鈕效果，非常實用，感興趣的朋友可以參考下2016-08-30
基于JS+Html5+css3實現手機端點擊圖標環(huán)形菜單特效源碼
基于JS+Html5+css3實現手機端點擊圖標環(huán)形菜單特效源碼是一款支持移動端觸摸事件，基于原生js以及html5+css3實現圖標環(huán)形菜單。點擊圖片淡入淡出兩次彈出環(huán)形菜單，點擊clo2016-08-30
CSS3實現圓形圖片鼠標懸停圖片旋轉放大特效源碼是一款采用CSS3結合圖片實現的鼠標懸停到圖標上面旋轉放大展示效果。本段代碼適應于所有網頁使用，有需要的朋友可以直接下載2016-08-30- 下面小編就為大家?guī)硪黄猚ss background 背景圖的設置方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-30
- 下面小編就為大家?guī)硪黄猚ss照片有如層疊效果的實現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-02
