CSS3 實現(xiàn)飄動的云朵動畫
發(fā)布時間：2020-12-01 17:32:35 作者：Montana Flynn 
我要評論
我要評論這篇文章主要介紹了CSS3 實現(xiàn)飄動的云朵動畫，幫助大家更好的理解和學(xué)習(xí)css3的使用，感興趣的朋友可以了解下
運行效果
html
<head>
<meta charset='UTF-8'>
<title>CSS3 Cloud Animations By Montana Flynn</title>
</head>
<body>
<div class="sky">
<div class="moon"></div>
<div class="clouds_two"></div>
<div class="clouds_one"></div>
<div class="clouds_three"></div>
</div>
</body>
css
html, body {
margin: 0;
height: 100%
}
.sky {
height: 480px;
background: #007fd5;
position: relative;
overflow: hidden;
-webkit-animation: sky_background 50s ease-out infinite;
-moz-animation: sky_background 50s ease-out infinite;
-o-animation: sky_background 50s ease-out infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.moon {
background: url("http://i.imgur.com/wFXd68N.png");
position: absolute;
left: 0;
height: 300%;
width: 300%;
-webkit-animation: moon 50s linear infinite;
-moz-animation: moon 50s linear infinite;
-o-animation: moon 50s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.clouds_one {
background: url("http://www.scri8e.com/stars/PNG_Clouds/zc06.png?filename=./zc06.png&w0=800&h0s=289&imgType=3&h1=50&w1=140");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_one 50s linear infinite;
-moz-animation: cloud_one 50s linear infinite;
-o-animation: cloud_one 50s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.clouds_two {
background: url("http://freepngimages.com/wp-content/uploads/2016/02/clouds-transparent-background-2.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_two 75s linear infinite;
-moz-animation: cloud_two 75s linear infinite;
-o-animation: cloud_two 75s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.clouds_three {
background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_three 100s linear infinite;
-moz-animation: cloud_three 100s linear infinite;
-o-animation: cloud_three 100s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
@-webkit-keyframes sky_background {
0% {
background: #007fd5;
color: #007fd5
}
50% {
background: #000;
color: #a3d9ff
}
100% {
background: #007fd5;
color: #007fd5
}
}
@-webkit-keyframes moon {
0% {
opacity: 0;
left: -200% -moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left: 0% bottom: 250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom: 500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes cloud_one {
0% {
left: 0
}
100% {
left: -200%
}
}
@-webkit-keyframes cloud_two {
0% {
left: 0
}
100% {
left: -200%
}
}
@-webkit-keyframes cloud_three {
0% {
left: 0
}
100% {
left: -200%
}
}
@-moz-keyframes sky_background {
0% {
background: #007fd5;
color: #007fd5
}
50% {
background: #000;
color: #a3d9ff
}
100% {
background: #007fd5;
color: #007fd5
}
}
@-moz-keyframes moon {
0% {
opacity: 0;
left: -200% -moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left: 0% bottom: 250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom: 500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-moz-keyframes cloud_one {
0% {
left: 0
}
100% {
left: -200%
}
}
@-moz-keyframes cloud_two {
0% {
left: 0
}
100% {
left: -200%
}
}
@-moz-keyframes cloud_three {
0% {
left: 0
}
100% {
left: -200%
}
}
以上就是CSS3 實現(xiàn)飄動的云朵動畫的詳細內(nèi)容，更多關(guān)于CSS3 飄動的云的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
- 這篇文章主要介紹了CSS3中的字體及相關(guān)屬性，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2025-06-12
- 本文詳細解析了CSS3中實現(xiàn)賬號密碼輸入框提示特效的原理和方法，包括HTML5的placeholder屬性與CSS3新特性如偽類選擇器、動態(tài)效果和過渡動畫的結(jié)合使用，感興趣的朋友跟隨小2025-05-14
- CSS3的布局特性為前端開發(fā)者提供了無限可能，無論是Flexbox的一維布局還是Grid的二維布局，它們都能夠幫助開發(fā)者以更清晰、簡潔的方式實現(xiàn)復(fù)雜的網(wǎng)頁布局，本文給大家介紹C2025-05-14
CSS3 Facebook-style Buttons 項目常見問題及最新解決方案
CSS3 Facebook-style Buttons 是一個開源項目，旨在通過簡單的 CSS 代碼來重現(xiàn) Facebook 按鈕和工具欄的外觀，本文給大家介紹CSS3 Facebook-style Buttons 項目常見問題及2025-05-14使用animation.css庫快速實現(xiàn)CSS3旋轉(zhuǎn)動畫效果
隨著Web技術(shù)的不斷發(fā)展，動畫效果已經(jīng)成為了網(wǎng)頁設(shè)計中不可或缺的一部分，本文將深入探討animation.css的工作原理，如何使用以及其在實際項目中的應(yīng)用,感興趣的朋友一起看2025-05-14
CSS3 最強二維布局系統(tǒng)之Grid 網(wǎng)格布局
CS3的Grid網(wǎng)格布局是目前最強的二維布局系統(tǒng),可以同時對列和行進行處理,將網(wǎng)頁劃分成一個個網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局，本文介紹CSS3 最強二維布局系2025-02-27- 本文介紹了如何使用CSS3的transform屬性和動畫技巧實現(xiàn)波浪式圖片墻,通過設(shè)置圖片的垂直偏移量,并使用動畫使其周期性地改變位置,可以創(chuàng)建出動態(tài)且具有波浪效果的圖片墻,同2025-02-27
CSS3模擬實現(xiàn)一個雷達探測掃描動畫特效(最新推薦)
文章介紹了如何使用CSS3實現(xiàn)一個雷達探測掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤、掃描體的轉(zhuǎn)動效果、尾巴陰影以及被掃描到的光點,通過HTML和CSS的配合,實現(xiàn)了豐富的動畫效果,2025-02-21- CSS3的Flexbox是一種強大的布局模式,通過設(shè)置display:flex可以輕松實現(xiàn)對齊、排列和分布網(wǎng)頁元素,它解決了傳統(tǒng)布局方法中的對齊、間距分配和自適應(yīng)布局等問題,接下來通過本2025-02-19
css3 實現(xiàn)icon刷新轉(zhuǎn)動效果
本文給大家介紹css3 實現(xiàn)icon刷新轉(zhuǎn)動效果，文章開頭給大家介紹了webkit-transform、animation、@keyframes這三個屬性，結(jié)合實例代碼給大家介紹的非常詳細，感興趣的朋友一2025-02-19
