运用css设置云朵从白天渐渐到晚上再到白天的变化
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
/* 设置背景样式 */
.bg {
height: 100vh;
background-color: skyblue;
animation: sky 10s linear infinite;
}
/* 设置云彩样式 */
.bg .cloud_one{
width: 300%;
height: 100%;
background: url('../images/cloud_one.png') repeat-x;
position: fixed;
top: 0;
left:0;
animation: cloud 20s linear infinite;
}
.bg .cloud_two{
width: 300%;
height: 100%;
background: url('../images/cloud_two.png') repeat-x;
position: fixed;
top: 0;
left:0;
animation: cloud 40s linear infinite;
}
.bg .cloud_three{
width: 300%;
height: 100%;
background: url('../images/cloud_three.png') repeat-x;
position: fixed;
top: 0;
left:0;
animation: cloud 60s linear infinite;
}
/* 设置天空轮播 */
@keyframes sky {
0% {
background-color: skyblue;
}
50% {
background-color: #000;
}
100% {
background-color: skyblue;
}
}
/* 设置云彩轮播 */
@keyframes cloud {
from{
left: 0;
}
to{
left: -200%;
}
}
</style>
</head>
<body>
<div class="bg">
<div class="cloud_one"></div>
<div class="cloud_two"></div>
<div class="cloud_three"></div>
</div>
</body>
</html>
效果图