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