[分享]css3慢慢展开过度效果

在网页设计中，过度效果是非常重要的一部分，可以增强用户体验，使网页更加生动有趣。CSS3提供了丰富的过度效果，其中有一种慢慢展开的效果，可以让元素从中心点逐渐放大，给人以渐进式的感觉，非常具有视觉冲击...

在网页设计中，过度效果是非常重要的一部分，可以增强用户体验，使网页更加生动有趣。CSS3提供了丰富的过度效果，其中有一种慢慢展开的效果，可以让元素从中心点逐渐放大，给人以渐进式的感觉，非常具有视觉冲击力。下面将介绍如何通过CSS3实现这种慢慢展开的过度效果。

 .center{
        position: relative;
        width: 100px;
        height: 100px;
        background: #ddd;
        overflow: hidden;
    }
    .center:hover::before{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.3);
        width: 0;
        height: 0;
        background: #f00;
        border-radius: 50%;
        transition: all 0.3s ease-out;
    }
    .center:hover::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70px;
        height: 70px;
        background: #ddd;
        border-radius: 50%;
        transition: all 0.3s ease-out;
    }
    .center:hover::before,
    .center:hover::after{
        animation: scale-center 0.3s 1 ease-out forwards;
    }
    @keyframes scale-center{
        0%{
            transform: translate(-50%, -50%) scale(0.3);
        }
        100%{
            transform: translate(-50%, -50%) scale(1);
        }
    } 

以上是相关代码，首先我们定义了一个类名为“center”的容器，在该容器上设置了宽度、高度、背景色、溢出隐藏等基本样式，使该容器成为我们要展开的元素。

接下来，在容器上通过伪元素::before、::after创建两个小圆点，分别用于扩散波纹和过渡形态。这两个圆点的初始位置都是与容器的中心点重合的，大小默认都是0，由于overflow属性我们需要把超出容器范围的内容隐藏起来。

在:hover状态下，我们分别给两个圆点添加了一个scale-center的动画，控制其由初始状态缩小到放大的过程。同时，我们在:hover状态下，给两个圆点分别设置了不同的大小和颜色，让效果更加生动有趣。

最后，为了让缩放效果更加顺畅，我们在容器的伪元素上加上了transition属性，使画面过渡缓慢平稳。至此，一个基于CSS3的慢慢展开过度效果已经制作完成。