01-純css打造雲端仙境
阿新 • • 發佈：2021-02-02
這款雲端動畫效果，主要css3動畫和css變數打造而成。css3使雲朵移動，css變數給雲朵造成移動速度的不同。程式碼免費下載地址，具體解釋步驟如下。（喜歡的話就點贊收藏奧）
步驟一：先把body部分的程式碼完成（把透明的雲朵圖片放入body中），並且設定下變數–i(為雲朵不同移動速度準備)。
<body>
<div class="clouds">
<img src="./images/cloud1.png" style="--i:1" 步驟二：對body部分進行佈局，給body新增背景，並且使div[class=clouds]大小布滿螢幕，最後雲朵的圖片利用絕對定位放置在div[class=clouds]的底部（使圖片看起來更加仙氣）。
<style> * { margin: 0; padding: 0; } html, body { width: 100vw; height: 100vh; background: url(./images/2d-bg.jpg) no-repeat; background-size: cover; background-position: top; overflow: hidden; } .clouds { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* background-color: aqua; */ } .clouds img { position: absolute; bottom: 0; max-width: 100%; transform: scaleY(2); }
步驟三（重點）：利用css動畫給雲朵圖片新增移動效果（改變雲朵圖片的X軸位移），在利用var(–i)獲取body部分i的值，然後利用calc（8s*var(–i)）計算出不同雲朵動畫完成的時間（達到雲朵的移動速度不同。）
補充：不瞭解css變數的點選這裡！！！
.clouds img {
position: absolute;
bottom: 0;
max-width: 100%;
animation: animate calc(8s*var(--i)) linear infinite;
transform: scaleY(2);
}
@keyframes animate {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}