css宝箱打开动画 |好看的弹出框 css

.box {
position: relative;
width: 100px;
height: 100px;
background-color: #e5e5e5;
}
.box:before, .box:after {
content: '';
position: absolute;
width: 0px;
height: 100px;
background-color: #f7a831;
}
.box:before {
left: -50px;
top: 0px;
transition: width 0.5s cubic-bezier(0, 0.75, 0.25, 1);
}
.box:after {
right: -50px;
top: 0px;
transition: width 0.5s cubic-bezier(0, 0.75, 0.25, 1) 0.25s;
}
.box:hover:before, .box:hover:after {
width: calc(50% - 25px);
}

大家首先定义一个.box元素，并给它设置一定的宽和高和背景色。然后在这个元素的before和after伪元素上设置一个宽度为0的背景色。注意，大家需要将这两个伪元素绝对定位。接下来，大家为before和after伪元素定义一个从它们的左右两侧向内扩散的过渡动画效果，以及一个贝塞尔曲线函数，这样可以实现更加自然流畅的动画效果。最后，在.box:hover:before和.box:hover:after选择器中，大家为before和after伪元素的宽度设置一个calc动态计算的样式属性，这样就能实现在鼠标移到宝箱上时，它们从左右两侧向中心缩小的动画效果了。