今天本篇文章给大家分享一个边框动画特效，看看使用CSS3如何实现 边框阴影 向外扩散的动画特效。
我们先来看看效果图：
下面我们来研究一下是怎么实现这个效果的：
首先创建HT ML 部分 ，定义一个 div 容器，包含文本文字：
<div id="box"> 编程是为那些有不同想法的人准备的。。。< br /> 对于那些想要 创造 伟大事物并愿意 改变 世界的人。 </div>
然后 开始 定义css样式来进行修饰 ： 调整 布局样式、 背景颜色 、div 居中对齐 、 字体颜色
body {
dis play : flex;
align -i tems: center ;
justify-content: center;
h ei ght: 100vh;
background: # 00ac69;
}
#box {
font-f ami ly: Arial;
font- Size: 18px;
line-height: 30px;
font-weight : bold;
color: wh IT e;
border: 2px solid;
padding: 15px;
}
直角不好看，我们可以使用border-radius来将边框的四个角设置为 圆 角
#box {
border-radius: 10px;
}
下面就是最关键的，创建影向外扩散的动画特效： 我们使用animation和@keyfr am es来实现
首先把 animation 绑定到#box元素上，使用animation属性 为@keyframes动画规定名称、设置完成动画所花费的时间、动画的速度曲线。
#box {
animation: ani MATE d-border 1.5s infinite;
} 然后就是 利用 @keyframes来设置动画每一帧的动作了
这里是设置动画刚开始（0%{}）时，边框阴影为 box -s hadow: 0 0 0 0 rgba(255, 255, 255, 0.4); ；然后当动画完成（100%{}）时，边框阴影为 box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); ，阴影 距离 变大、颜色变为透明。
@keyframes animated-border {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
}
OK，大功告成！下面附上完整代码：
<!DOCTY PE html>
<html>
<head>
< ;m eta charset="utf-8">
<style type="text/css">
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #00ac69;
}
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
border: 2px solid;
padding: 15px;
border-radius: 10px;
animation: animated-border 1.5s infinite;
}
@keyframes animated-border {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
}
</style>
</head>
<body>
<div id="box">
编程是为那些有不同想法的人准备的。。。<br />
对于那些想要创造伟大事物并愿意改变世界的人。
</div>
</body>
</html>最后给大家介绍一下关键属性 animation 和 @keyframes ：
animation 属性是一个简写属性，可以在一个声明中设置多个动画属性：
animation-name：指定要绑定到选择器的关键帧的名称 animation-duration：动画指定需要多少秒或毫秒完成 animation -t iming-function：设置动画将如何完成一个周期 animation-delay：设置动画在启动前的延迟间隔。 animation-iteration-count：定义动画的播放次数。 animation-direction：指定 是否 应该 轮流反向播放动画。 animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 animation-play- stat e：指定动画是否正在运行或已 暂停 。
@keyframes 规则用于定义CSS动画的一个周期的行为；需要和animation属性一起使用，创建 简单 的动画效果。
@keyframe规则由关键字“@keyframe”组成，后面接着是给出动画名称的标识符（将使用animation-name引用），随后是通过一组样式规则（用大括号分隔）。然后，通过使用标识符作为animation-name属性的值，将动画应用于元素。例如：
/* 定义动画*/
@keyframes 动画名称{
/* 样式规则*/
}
/* 将它应用于元素 */
.element {
animation-name: 动画名称（在@keyframes中已经声明好的）;
/* 或使用动画简写属性*/
animation: 动画名称 1s .. .
}在@keyframes规则的大括号中，我们需要定义关键帧或航点，这些关键帧或航点指定在动画期间的特定点处正在动画化的属性的值。这允许我们控制动画序列中的中间步骤。例如上例中的：
@keyframes animated-border {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
}PHP中文网平台有非常多的视频教学资 源 ，欢迎大家学习《css视频教程》！
以上就是纯CSS3创建边框阴影向外扩散的动画特效的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 纯CSS3创建边框阴影向外扩散的动画特效 全部内容，希望文章能够帮你解决 纯CSS3创建边框阴影向外扩散的动画特效 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于纯CSS3创建边框阴影向外扩散的动画特效的详细内容...