HTML5是一種標記語言，可以用于創建網站的基礎結構。隨著技術的發展，HTML5還可以用于創建動態背景，這種背景可以使站點看起來更加現代和專業。
<html>
<head>
<title>動態背景實例</title>
<style>
body {
background: linear-gradient(to bottom, #ffffff, #f0f0f0);
}
#container {
position: relative;
height: 100vh;
}
.cloud {
position: absolute;
background: #ffffff;
border-radius: 50%;
opacity: 0.8;
animation-name: floating;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#cloud1 {
top: 10%;
left: 10%;
height: 100px;
width: 150px;
animation-delay: 0s;
}
#cloud2 {
top: 30%;
left: 20%;
height: 150px;
width: 250px;
animation-delay: 1s;
}
#cloud3 {
top: 50%;
right: 10%;
height: 120px;
width: 200px;
animation-delay: 2s;
}
@keyframes floating {
from {
transform: translate(0, 0);
}
50% {
transform: translate(0, 15px);
}
to {
transform: translate(0, 0);
}
}
</style>
</head>
<body>
<div id="container">
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
<div id="cloud3" class="cloud"></div>
</div>
</body>
</html>代碼中使用偽類的線性漸變來設置背景。頁面中的云朵是一個圓形元素，使用CSS3的動畫效果來實現浮動。
上一篇html5動態心形代碼
下一篇html5動態矩形的代碼