今天分享一个用 css3 的 animation 实现的一个发光盒子的动画效果，先来看成品图
实现思路很简单，是通过盒子阴影属性 box-shadow 来实现的，首先在 @keyframes 里的初始帧设置盒子阴影为空，然后在结束帧设置盒子阴影不为空就可以了
标签元素部分
<body> <span class="txt">欢迎来到Lpyexplore的编程小屋！</span></body>
@keyframes部分
@keyframes animated-border { /* 初始帧 此时盒子阴影为空 */ 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } /* 结束帧 此时盒子阴影不为空 */ 100% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } }
具体样式
body{ width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: rgb(13,197,193);}.txt{ color: white; font-weight: bold; font-size: 18px; padding: 15px 20px; border: 2px solid white; border-radius: 10px; animation: animated-border 1.5s infinite;}
完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>发光盒子动画</title> <style> @keyframes animated-border { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 100% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } } body{ width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: rgb(13,197,193); } .txt{ color: white; font-weight: bold; font-size: 18px; padding: 15px 20px; border: 2px solid white; border-radius: 10px; animation: animated-border 1.5s infinite; }</style></head><body> <span class="txt">欢迎来到Lpyexplore的编程小屋！</span></body></html>
关注我，带你每天了解一个 css3 炫酷小动画
