CSS3動(dòng)畫(huà)animation實(shí)現(xiàn)云彩向左滾動(dòng)
發(fā)布時(shí)間：2014-05-09 11:10:33 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS3動(dòng)畫(huà)animation如何實(shí)現(xiàn)云彩向左滾動(dòng)的效果，需要的朋友可以參考下
實(shí)現(xiàn)的圖像動(dòng)畫(huà)效果大致是這樣的：云彩向左滾動(dòng)！
【代碼效果】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3動(dòng)畫(huà)animation實(shí)現(xiàn)漂浮的云</title>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
.wrap {
height: 190px;
width: 600px;
margin: 150px auto 0;
background: url('bg-clouds.png');
-webkit-animation:cloud 40s linear infinite;
-o-animation:cloud 40s linear infinite;
}
@-webkit-keyframes cloud {
from{background-position:0% 0%}
to{background-position:50% 50%}
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
【用到的素材】
【代碼效果】
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3動(dòng)畫(huà)animation實(shí)現(xiàn)漂浮的云</title>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
.wrap {
height: 190px;
width: 600px;
margin: 150px auto 0;
background: url('bg-clouds.png');
-webkit-animation:cloud 40s linear infinite;
-o-animation:cloud 40s linear infinite;
}
@-webkit-keyframes cloud {
from{background-position:0% 0%}
to{background-position:50% 50%}
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
【用到的素材】
相關(guān)文章
CSS3+Animation實(shí)現(xiàn)鼠標(biāo)滑過(guò)按鈕背景動(dòng)畫(huà)特效源碼
CSS3+Animation實(shí)現(xiàn)鼠標(biāo)滑過(guò)按鈕背景動(dòng)畫(huà)特效源碼是一款當(dāng)鼠標(biāo)滑過(guò)按鈕時(shí)，使用CSS3 animation來(lái)動(dòng)畫(huà)background-size和background-position屬性，來(lái)制作各種背景動(dòng)畫(huà)效果。2016-04-19
CSS3 Animation 制作按鈕鼠標(biāo)滑過(guò)動(dòng)畫(huà)填充背景特效源碼(13種)
CSS3 Animation 制作按鈕鼠標(biāo)滑過(guò)動(dòng)畫(huà)填充背景特效源碼(13種)是一款共有13種動(dòng)畫(huà)填充背景效果，均由按鈕的偽元素和CSS3 animation來(lái)制作完成，效果非常棒，喜歡的朋友前來(lái)2016-04-12CSS3中利用animation屬性創(chuàng)建雪花飄落特效
在CSS3中我們可以使用animation屬性來(lái)創(chuàng)建復(fù)雜的動(dòng)畫(huà)效果，本文就要借助它實(shí)現(xiàn)雪花飄落特效，功能代碼如下，希望對(duì)大家學(xué)習(xí)css3有所幫助2014-05-14
css3 animation實(shí)現(xiàn)的loading動(dòng)畫(huà)加載進(jìn)度條效果
一款純css3 animation動(dòng)畫(huà)屬性頁(yè)面loading動(dòng)畫(huà)加載進(jìn)度條效果2014-04-18
純CSS3 animation屬性實(shí)現(xiàn)的GIF圖片進(jìn)度加載效果
一款純CSS3 animation屬性實(shí)現(xiàn)GIF圖片進(jìn)度加載效果2014-01-22基于CSS3特效之動(dòng)畫(huà):animation的應(yīng)用
本篇文章對(duì)CSS3中的animation的使用進(jìn)行了詳細(xì)的介紹，需要的朋友可以參考下2013-05-09css3動(dòng)畫(huà)事件—webkitAnimationEnd與計(jì)時(shí)器time事件
用css3的animation完成一個(gè)動(dòng)畫(huà)，當(dāng)只有這個(gè)動(dòng)畫(huà)完成時(shí)才執(zhí)行令一個(gè)事件，比如讓動(dòng)畫(huà)保持在終止的狀態(tài)或其他一些事件,關(guān)于這個(gè)問(wèn)題，本文給出詳細(xì)的解決方案，感興趣的朋友2013-01-31- 關(guān)鍵貞的動(dòng)畫(huà)效果如果一樣，可以將關(guān)鍵貞的百分比用逗號(hào)隔開(kāi)，然后再寫(xiě)效果2012-05-10
CSS3 Animation 制作動(dòng)畫(huà)點(diǎn)擊波效果代碼
CSS3 Animation 制作動(dòng)畫(huà)點(diǎn)擊波效果代碼是一款使用CSS3 animation動(dòng)畫(huà)來(lái)制作點(diǎn)擊波效果，可以在按鈕和圖片等元素上制作點(diǎn)擊波特效。需要的朋友前來(lái)下載源碼2016-05-04
