[分享]css3动画边框残影

CSS3动画是现代HTML页面设计中常用的技术之一，本文将会讲述如何使用CSS3动画技术来实现边框残影。

.box{
    width: 200px;
    height: 200px;
    margin: 50px auto;
    position: relative;
    overflow: hidden;
}

.box:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #f00;
    animation: borderShadow 2s ease-in-out infinite;
}

@keyframes borderShadow{
    0%{
        box-shadow: 0 0 0 #f00;
    }
    50%{
        box-shadow: 0 0 10px #f00;
        transform: scale(1.2);
    }
    100%{
        box-shadow: 0 0 0 #f00;
    }
}

首先我们先创建一个容器，这里我们以一个 宽度为200px，高度为200px，有50px的 margin-top 和 margin-bottom 的盒子为例，容器需要加上position:relative;属性，在盒子中间嵌入一个伪元素:before，然后负责添加盒子的边框。设置border: 2px solid #f00，这样我们就得到一个红色2px边框的盒子。

下一步，我们需要定义动画样式。在这个例子中，我们使用了CSS3中的box-shadow属性。在第一桢动画间，我们创建了一个大小为0的阴影，然后在50%的时候，我们将阴影设置为10px并添加缩放的transition过渡，因此，红色的边框看起来就像是有一个阴影，最后在100%的时候，我们将阴影大小设置为0，就可以得到一连串呈现阴影的动画。

最后，我们使用animation属性将定义好的动画样式应用到伪元素上，使用infinite属性让循环持续无限时间。

这就是我们使用CSS3动画技术来实现边框残影的过程。我们希望这篇文章对你的学习和工作有所帮助。