css动画平面变成碎片 |css3 云朵移动

.animation {
background: url('image.jpg') no-repeat center center / cover;
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
}
.box {
width: 50%;
height: 50%;
float: left;
position: absolute;
transition: transform 1s ease-in-out;
}
.box1 {
top: 0;
left: 0;
background-position: 0 0;
}
.box2 {
top: 0;
right: 0;
background-position: 0 -50%;
}
.box3 {
bottom: 0;
left: 0;
background-position: -50% 0;
}
.box4 {
bottom: 0;
right: 0;
background-position: -50% -50%;
}
.animation:hover .box1 {
transform: translate(-100%, -100%);
}
.animation:hover .box2 {
transform: translate(100%, -100%);
}
.animation:hover .box3 {
transform: translate(-100%, 100%);
}
.animation:hover .box4 {
transform: translate(100%, 100%);
}

首先，大家需要一个具有背景图片的div，作为动画的容器。在这个容器中，大家分别创建四个大小相等的子块，使用float和position来让它们排列在一起。每个子块都有不同的背景图片位置，大家将它们四个拼在一起，形成完整的背景图。

接下来，在容器hover的时候，大家分别给每个子块应用不同的transform，在一个短时间内让它们分别移动到不同的方向上。通过这样的操作，大家就让平面变成了碎片，可以让网页看起来更精彩和有趣。

当然，这只是CSS动画中的一个小小的例子。在实际应用中，大家可以使用更多的CSS属性，组合出各种令人惊叹的动画效果。但是，要注意不要滥用CSS动画，否则会对网站性能造成负面影响。