HTML白云飄動特效是一種非常常見的前端動畫，本文將為大家介紹一種基于HTML和CSS實現(xiàn)的白云飄動特效代碼。
<html>
<head>
<style>
.cloud {
position: absolute;
width: 200px;
height: 100px;
background-color: white;
border-radius: 100px;
opacity: 0.8;
box-shadow: 0px 0px 20px white;
animation-name: cloud;
animation-duration: 25s;
animation-delay: 6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes cloud {
0% {
left: -200px;
top: 100px;
transform: scale(0.4);
}
25% {
left: 25%;
top: 15%;
transform: scale(0.7);
}
50% {
left: 50%;
top: 5%;
transform: scale(0.8);
}
75% {
left: 75%;
top: 20%;
transform: scale(0.6);
}
100% {
left: 110%;
top: 50%;
transform: scale(0.4);
}
}
</style>
</head>
<body>
<div class="cloud"></div>
</body>
</html>以上代碼使用了CSS3的動畫特性，通過定義關鍵幀并使用animation屬性實現(xiàn)白云漂浮的動態(tài)效果。其中，200px和100px是白云的寬和高，background-color設置為白色，border-radius設置為100%，使整個白云呈現(xiàn)出圓形。同時，通過opacity屬性使白云半透明，再設置box-shadow屬性使其產(chǎn)生陰影，更具真實度。
關鍵幀的定義使用了CSS3的@keyframes關鍵字，表示了白云的位置、大小和透明度等屬性隨時間的變化。具體的實現(xiàn)方法可以參考代碼中的注釋說明。最后，通過將生成的白云添加到HTML文檔中，即可實現(xiàn)完整的白云漂浮特效。