1. 效果设计
- 先找一张合适的云朵的图，透明底色。（这里就不提供了，可以根据个人喜好去自行搜索）
- 先在容器中间放4朵云。
- 让4朵云分别向容器的4个角移动。
- 让云在移动的过程中，逐渐变淡，制造一种逐渐消散的感觉。
- 示意图
2. 实现
2.1 先在容器中间放4朵云
2.1.1 DOM元素
<body>
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
<div id="cloud3" class="cloud"></div>
<div id="cloud4" class="cloud"></div>
</body>
2.1.2 html和body样式
*, html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
background: #000000;
}
- 云是白色的，需要给
body一个黑色（#000000）的底色，可以更好地衬托出白云的效果。
overflow: hidden;， 让云散出去的部分隐藏，不可见。position: relative;
2.1.3 效果
2.2 让4朵云分别向容器的4个角的方向移动，并且逐渐透明
2.2.1 关键帧动画编写说明
-webkit- - 代表safari、chrome私有属性forwards - 保留最后一帧时设置的样式。
2.2.2 “cloud1”（向左上角移动的云）
@keyframes cloud1 {
0% {
left: 5vw;
top: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
left: 100vw;
top: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
@-webkit-keyframes cloud1 {
0% {
left: 5vw;
top: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
left: 100vw;
top: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
2.2.3 “cloud2”（向左下角移动的云）
@keyframes cloud2 {
0% {
left: 5vw;
bottom: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
left: 100vw;
bottom: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
@-webkit-keyframes cloud2 {
0% {
left: 5vw;
bottom: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
left: 100vw;
bottom: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
2.2.4 “cloud3”（向右上角移动的云）
@keyframes cloud3 {
0% {
right: 5vw;
top: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
right: 100vw;
top: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
@-webkit-keyframes cloud3 {
0% {
right: 5vw;
top: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
right: 100vw;
top: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
2.2.5 “cloud4”（向右下角移动的云）
@keyframes cloud4 {
0% {
right: 5vw;
bottom: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
right: 100vw;
bottom: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
@-webkit-keyframes cloud4 {
0% {
right: 5vw;
bottom: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
right: 100vw;
bottom: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
2.2.6 将动画绑定到对应的“云朵”DOM元素上
#cloud1 {
left: 5vw;
top: 5vh;
animation: cloud1 5s forwards;
-webkit-animation: cloud1 5s forwards;
}
#cloud2 {
left: 5vw;
bottom: 5vh;
animation: cloud2 5s forwards;
-webkit-animation: cloud2 5s forwards;
}
#cloud3 {
right: 5vw;
top: 5vh;
animation: cloud3 5s forwards;
-webkit-animation: cloud3 5s forwards;
}
#cloud4 {
right: 5vw;
bottom: 5vh;
animation: cloud4 5s forwards;
-webkit-animation: cloud4 5s forwards;
}
2.2.7 最终效果
2.2.8 完整代码
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS实现云向四周散开的效果</title>
</head>
<body>
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
<div id="cloud3" class="cloud"></div>
<div id="cloud4" class="cloud"></div>
</body>
<style>
*, html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
background: #000000;
}
@keyframes cloud1 {
0% {
left: 5vw;
top: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
left: 100vw;
top: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
@-webkit-keyframes cloud1 {
0% {
left: 5vw;
top: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
left: 100vw;
top: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
@keyframes cloud2 {
0% {
left: 5vw;
bottom: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
left: 100vw;
bottom: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
@-webkit-keyframes cloud2 {
0% {
left: 5vw;
bottom: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
left: 100vw;
bottom: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
@keyframes cloud3 {
0% {
right: 5vw;
top: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
right: 100vw;
top: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
@-webkit-keyframes cloud3 {
0% {
right: 5vw;
top: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
right: 100vw;
top: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
@keyframes cloud4 {
0% {
right: 5vw;
bottom: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
right: 100vw;
bottom: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
@-webkit-keyframes cloud4 {
0% {
right: 5vw;
bottom: 5vh;
opacity: 0.8;
visibility: visible;
}
100% {
right: 100vw;
bottom: 100vh;
opacity: 0.05;
visibility: hidden;
}
}
.cloud {
background: url("./cloud.png") no-repeat;
width: 650px;
height: 481px;
background-size: 100% 100%;
position: absolute;
opacity: 0.8;
scale: 500%;
}
#cloud1 {
left: 5vw;
top: 5vh;
animation: cloud1 5s forwards;
-webkit-animation: cloud1 5s forwards;
}
#cloud2 {
left: 5vw;
bottom: 5vh;
animation: cloud2 5s forwards;
-webkit-animation: cloud2 5s forwards;
}
#cloud3 {
right: 5vw;
top: 5vh;
animation: cloud3 5s forwards;
-webkit-animation: cloud3 5s forwards;
}
#cloud4 {
right: 5vw;
bottom: 5vh;
animation: cloud4 5s forwards;
-webkit-animation: cloud4 5s forwards;
}
</style>
</html>