<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3白云飘动动画特效</title>
<style>
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 主体样式 */
body {
height: 100vh; /* 视口高度 */
background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 100%); /* 天空渐变背景 */
overflow: hidden; /* 隐藏溢出内容 */
position: relative; /* 相对定位 */
font-family: Arial, sans-serif; /* 字体设置 */
}
/* 白云基础样式 */
.cloud {
position: absolute; /* 绝对定位 */
background: white; /* 白色云朵 */
border-radius: 50%; /* 圆形 */
filter: blur(5px); /* 模糊效果使云更柔和 */
opacity: 0.9; /* 半透明效果 */
animation-timing-function: linear; /* 线性动画 */
animation-iteration-count: infinite; /* 无限循环 */
}
/* 大白云样式 */
.cloud-large {
width: 150px; /* 宽度 */
height: 60px; /* 高度 */
animation-name: moveCloudLarge; /* 动画名称 */
animation-duration: 60s; /* 动画时长 */
}
/* 中白云样式 */
.cloud-medium {
width: 100px; /* 宽度 */
height: 40px; /* 高度 */
animation-name: moveCloudMedium; /* 动画名称 */
animation-duration: 40s; /* 动画时长 */
}
/* 小白云样式 */
.cloud-small {
width: 70px; /* 宽度 */
height: 30px; /* 高度 */
animation-name: moveCloudSmall; /* 动画名称 */
animation-duration: 30s; /* 动画时长 */
}
/* 大白云动画 */
@keyframes moveCloudLarge {
0% {
left: -200px; /* 起始位置 */
top: 20%; /* 垂直位置 */
transform: scale(1); /* 初始大小 */
}
50% {
transform: scale(1.1); /* 中间变大 */
}
100% {
left: 110%; /* 移动到右侧 */
top: 15%; /* 轻微上下浮动 */
transform: scale(1); /* 恢复大小 */
}
}
/* 中白云动画 */
@keyframes moveCloudMedium {
0% {
left: -150px; /* 起始位置 */
top: 40%; /* 垂直位置 */
transform: scale(1); /* 初始大小 */
}
50% {
transform: scale(1.05); /* 中间轻微变大 */
}
100% {
left: 110%; /* 移动到右侧 */
top: 35%; /* 轻微上下浮动 */
transform: scale(1); /* 恢复大小 */
}
}
/* 小白云动画 */
@keyframes moveCloudSmall {
0% {
left: -100px; /* 起始位置 */
top: 60%; /* 垂直位置 */
transform: scale(1); /* 初始大小 */
}
50% {
transform: scale(1.03); /* 中间轻微变大 */
}
100% {
left: 110%; /* 移动到右侧 */
top: 65%; /* 轻微上下浮动 */
transform: scale(1); /* 恢复大小 */
}
}
/* 云朵阴影部分（增强立体感） */
.cloud::before, .cloud::after {
content: ''; /* 伪元素内容 */
position: absolute; /* 绝对定位 */
background: white; /* 白色 */
border-radius: 50%; /* 圆形 */
filter: blur(3px); /* 模糊效果 */
}
/* 大云朵的阴影部分 */
.cloud-large::before {
width: 80px; /* 宽度 */
height: 80px; /* 高度 */
top: -30px; /* 位置 */
left: 20px; /* 位置 */
}
.cloud-large::after {
width: 50px; /* 宽度 */
height: 50px; /* 高度 */
top: -20px; /* 位置 */
left: 80px; /* 位置 */
}
/* 中云朵的阴影部分 */
.cloud-medium::before {
width: 60px; /* 宽度 */
height: 60px; /* 高度 */
top: -20px; /* 位置 */
left: 10px; /* 位置 */
}
.cloud-medium::after {
width: 40px; /* 宽度 */
height: 40px; /* 高度 */
top: -15px; /* 位置 */
left: 50px; /* 位置 */
}
/* 小云朵的阴影部分 */
.cloud-small::before {
width: 40px; /* 宽度 */
height: 40px; /* 高度 */
top: -15px; /* 位置 */
left: 10px; /* 位置 */
}
.cloud-small::after {
width: 30px; /* 宽度 */
height: 30px; /* 高度 */
top: -10px; /* 位置 */
left: 35px; /* 位置 */
}
/* 网站链接样式 */
.website-link {
position: fixed; /* 固定定位 */
bottom: 20px; /* 底部位置 */
right: 20px; /* 右侧位置 */
color: #333; /* 文字颜色 */
font-size: 14px; /* 字体大小 */
text-decoration: none; /* 无下划线 */
z-index: 100; /* 层级 */
}
/* 标题样式 */
.title {
position: absolute; /* 绝对定位 */
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%); /* 精确居中 */
color: white; /* 白色文字 */
font-size: 36px; /* 字体大小 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 文字阴影 */
z-index: 10; /* 层级 */
}
</style>
</head>
<body>
<!-- 标题 -->
<h1 class="title">白云飘动动画特效</h1>
<!-- 大白云 -->
<div class="cloud cloud-large" style="animation-delay: 0s;"></div>
<div class="cloud cloud-large" style="animation-delay: 10s;"></div>
<div class="cloud cloud-large" style="animation-delay: 20s;"></div>
<!-- 中白云 -->
<div class="cloud cloud-medium" style="animation-delay: 5s;"></div>
<div class="cloud cloud-medium" style="animation-delay: 15s;"></div>
<div class="cloud cloud-medium" style="animation-delay: 25s;"></div>
<!-- 小白云 -->
<div class="cloud cloud-small" style="animation-delay: 0s;"></div>
<div class="cloud cloud-small" style="animation-delay: 7s;"></div>
<div class="cloud cloud-small" style="animation-delay: 14s;"></div>
<div class="cloud cloud-small" style="animation-delay: 21s;"></div>
</body>
</html>