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