[分享]css3怎么设置延伸动画

CSS3是一个强大的动画工具，可以通过设置延伸动画来增加页面的互动性和吸引力。下面我们来介绍如何设置延伸动画。 .box { width: 100px; height: 100px; backgrou...

CSS3是一个强大的动画工具，可以通过设置延伸动画来增加页面的互动性和吸引力。下面我们来介绍如何设置延伸动画。

 .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: relative;
        margin: 50px auto;
    }

    .box::before, .box::after {
        content: ';
        position: absolute;
        height: 100%;
        width: 0;
        top: 0;
        left: 50%;
        background-color: #0f0;
        transform: translateX(-50%);
        transition: width 500ms ease-out;
    }

    .box:active::before, .box:active::after {
        width: 50%;
    }

    .box::before {
        transform-origin: right;
    }

    .box::after {
        transform-origin: left;
    } 

首先，在 HTML 中创建一个包含需要设置延伸动画的元素的 div。然后，设置该元素的初始尺寸、背景颜色以及位置等属性。为了达到延伸动画的效果，我们还需要设置元素的伪元素 before 和 after。伪元素的高度需要与包含元素的高度相同，宽度则设置为 0。通过设置 transform 的 translateX 属性以及 left 属性，将伪元素放置在包含元素的正中央。

接着，设置伪元素的过渡效果，将宽度改变的过程设为500毫秒，并设置Easing函数为ease-out，使得伪元素的宽度变化在最后面缓慢。通过设置 :active 选择器，使得当用户点击元素时，伪元素的宽度随之改变。:before 和 :after 伪元素的宽度改变方向应该相反，这样才能实现延伸的效果。 最后，在 :before 和 :after 伪元素中分别设置 transform-origin 属性，以实现伸展方向相反的效果。