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