css动画立方体炸开 |css3 关闭按钮样式

// 首先，大家需要定义一个立方体
.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transform-origin: center center;
animation: explode 2s ease-in-out forwards;
}
// 接着，大家需要给立方体各个面上色，并绘制线条，这样能够更好的展现出炸开的效果
.cube__face {
width: 100%;
height: 100%;
background-color: #fff;
border: 1px solid #000;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.cube__face--front {
transform: translateZ(50px);
}
.cube__face--back {
transform: translateZ(-50px) rotateY(180deg);
}
.cube__face--right {
transform: rotateY(90deg) translateZ(50px);
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube__face--top {
transform: rotateX(90deg) translateZ(50px);
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(50px);
}
// 最后，就是定义大家的动画了，大家使用关键帧来定义动画过程
@keyframes explode {
0% {
transform: translateZ(0);
}
30% {
transform: rotateX(30deg) rotateY(10deg) translateZ(150px) scale(1.1);
}
60% {
transform: rotateX(90deg) rotateY(50deg) translateZ(450px) scale(1.5);
}
100% {
transform: rotateX(140deg) rotateY(90deg) translateZ(-200px) scaleY(0.5);
}
}

通过以上代码，大家就可以实现立方体炸开的效果了。这种动画效果展现出的是一种旋转、移动的立方体，从起点到终点完成的过程中立方体的形态和位置都发生了变化，直到最后形成了一片背景。