標籤：ini ota nim head type css body padding mat
<!doctype html><html><head><meta charset="utf-8"><title>天空飄著五朵雲</title><style>*{ margin: 0; padding: 0;}body {overflow: hidden;}#clouds{ padding: 100px 0;background: #c9dbe9;background: linear-gradient(top, #c9dbe9 0%, #fff 100%);}.cloud { width: 200px; height: 60px;background: #fff;border-radius: 200px;position: relative;}.cloud:before , .cloud:after { content: ‘‘;background: #fff;width: 100px; height: 80px;position: absolute; top: -15px; left: 10px;border-radius: 100px;transform: rotate(30deg);}.cloud:after {width: 120px; height: 120px;top: -55px; right: 15px;left: auto;}.x1 {animation: moveclouds 15s linear infinite;}.x2 {left: 200px;transform: scale(0.6);opacity: 0.6;animation: moveclouds 25s linear infinite;}.x3 {left: -250px; top: -200px;transform: scale(0.8);opacity: 0.8;animation: moveclouds 20s linear infinite;}.x4 {left: 470px; top: -250px;transform: scale(0.75);opacity: 0.75; animation: moveclouds 18s linear infinite;}.x5 {left: 350px; top: -150px;transform: scale(0.8);opacity: 0.8; animation: moveclouds 20s linear infinite;}@keyframes moveclouds {0% {margin-left: 1000px;}100% {margin-left: -1000px;}}</style></head><body><div id="clouds"><div class="cloud x1"></div><div class="cloud x2"></div><div class="cloud x3"></div><div class="cloud x4"></div><div class="cloud x5"></div></div></body></html>
CSS 空中飄動的雲動畫
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
