想直接拿走的老板，链接放在这里：上传后更新
缘
创作随缘，不定时更新。
创作背景
刚看到csdn出活动了，赶时间，直接上代码。
html结构
<div class="cloud-bg">
<div class="fog"></div>
<div class="fog"></div>
</div>
css样式
body {
margin: 0;
min-height: 100vh;
}
.cloud-bg {
position: relative;
height: 100vh;
background: radial-gradient(circle at bottom, #6D8EA0, #3A506B);
overflow: hidden;
}
.fog {
position: absolute;
width: 200%;
height: 200%;
background:
linear-gradient(90deg,
rgba(255,255,255,0) 10%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0) 90%
);
filter: blur(40px);
animation: drift 30s linear infinite;
}
@keyframes drift {
0% { transform: translate(-50%, -50%) rotate(15deg); }
100% { transform: translate(50%, 50%) rotate(15deg); }
}
/* 多层次云雾 */
.fog:nth-child(1) {
top: 20%;
left: -50%;
opacity: 0.7;
animation-duration: 35s;
}
.fog:nth-child(2) {
top: 60%;
filter: blur(60px);
animation-duration: 45s;
}
完整代码
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
min-height: 100vh;
}
.cloud-bg {
position: relative;
height: 100vh;
background: radial-gradient(circle at bottom, #6D8EA0, #3A506B);
overflow: hidden;
}
.fog {
position: absolute;
width: 200%;
height: 200%;
background:
linear-gradient(90deg,
rgba(255,255,255,0) 10%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0) 90%
);
filter: blur(40px);
animation: drift 30s linear infinite;
}
@keyframes drift {
0% { transform: translate(-50%, -50%) rotate(15deg); }
100% { transform: translate(50%, 50%) rotate(15deg); }
}
/* 多层次云雾 */
.fog:nth-child(1) {
top: 20%;
left: -50%;
opacity: 0.7;
animation-duration: 35s;
}
.fog:nth-child(2) {
top: 60%;
filter: blur(60px);
animation-duration: 45s;
}
</style>
</head>
<body>
<div class="cloud-bg">
<div class="fog"></div>
<div class="fog"></div>
</div>
</body>
</html>
效果图
