[分享]css3动画边旋转边展开

CSS3动画可以使网页变得更加生动，让用户感到更舒适和愉悦。边旋转边展开的动画效果可以使网页更加简洁和美观，下面我们就来探讨一下它的制作方法。 .box { width: 100px; height:...

CSS3动画可以使网页变得更加生动，让用户感到更舒适和愉悦。边旋转边展开的动画效果可以使网页更加简洁和美观，下面我们就来探讨一下它的制作方法。

 .box {
        width: 100px;
        height: 100px;
        position: relative;
    }

    .box::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #f00;
        z-index: -1;
        transform: scale(0);
        transform-origin: left;
        transition: transform 0.5s ease-out;
    }

    .box:hover::before {
        transform: scale(1);
    }

    .box:hover {
        transform: rotate(-90deg);
    } 

首先创建一个元素，宽高为100px并设为相对定位。接着通过伪元素:before来制作展开效果的红色背景，设置宽高为100%、绝对定位，并使用z-index将其置于底部。同时引入transform属性进行初始设定，将其缩放为0并设置transform-origin为左侧。最后设置过度效果，即鼠标悬停时所展现的效果。

在:hover状态下，元素便会以中心点旋转-90度，与红色背景同时进行动画渐变。

如此一来，我们就制作了一个简单而优美的css3动画效果——边旋转边展开。希望此文对您有所帮助。