css3盒子打开动画 |css 2d动画简单的进度条

.box{
width: 200px;
height: 200px;
background-color: #eee;
overflow: hidden;
position: relative;
transition: all 0.5s ease-in-out;
}
.box:hover{
width: 300px;
height: 300px;
}
.box::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #fff;
transform-origin: left;
transform: skewX(-45deg);
transition: transform 0.5s ease-in-out;
}
.box:hover::before{
transform: skewX(0);
}
.box::after{
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: #fff;
transform-origin: right;
transform: skewX(45deg);
transition: transform 0.5s ease-in-out;
}
.box:hover::after{
transform: skewX(0);
}

上述代码中，大家首先定义了一个名为.box的类，设置它的宽度、高度和背景颜色。这里大家使用了overflow:hidden属性，这样可以隐藏.box类中所有的溢出内容，保证页面整洁。

当用户将鼠标移动到这个盒子上时，大家使用:hover伪类，改变盒子的宽度和高度，这样盒子就会有了一个放大的效果。

然后，大家使用伪元素::before和::after来模拟盒子的两个侧面，同时使用transform属性来实现它们的倾斜效果。通过设置transform-origin属性，大家让它们倾斜的中心分别位于左侧和右侧。

最后，在使用:hover伪类时，改变伪元素的transform属性，让它们的倾斜恢复为水平状态，从而呈现出盒子打开的效果。

通过这段简单的代码，就可以实现一个流畅而华丽的盒子打开动画效果。