今天和大家分享一个利用CSS3的animation属性完成的一个边框动画效果。大家都知道，CSS3给我们提供了@keyframes关键字，能让我们在网页中轻松插入动画。一个简单的动画插入，结构如下：
1 <style> 2 ?????.wrap{ 3 ?????????position: absolute; 4 ?????????left: 200px; 5 ?????????width: 200px; 6 ?????????height: 200px; 7 ?????????animation: run 2s linear infinite; ??/*动画名 时间 速度 动画次数*/ 8 ?????????background-color: rgb(87, 182, 9); 9 ?????}10 ?????@keyframes run{ ??/* @keyframe 关键字声明动画 */11 ????? from{ /* 从什么样子 */12 ???????? left: 200px;13 ????? }14 ????? to{15 ???????? left: 500px; /*变成什么样子*/16 ????????}17 ?????}18 </style>
19 <body>20 <div class="wrap"></div>21 </body>效果如下：
除了用from to 这种形式之外，我们还可以用百分比，更加细化各个阶段的表现样式，例子如下：
<head>
<style> ???????.around{ ???????????position: relative; ???????????width:200px; ???????????height: 300px; ???????????margin:50px auto; ???????????background-color:#000005; ???????????cursor: pointer; ???????} ???????.around::before,.around::after{ ???????????content:‘‘; ???????????position: absolute; ???????????border-style:solid; ???????????animation: move 5s linear infinite; ???????????opacity: 1; ???????} ???????.around::after{ ???????????animation-delay: -2.5s; ???????} ???????@keyframes move{ ???????????0%{ ???????????????top:-21px; ???????????????left:-21px; ???????????????width: 240px; ???????????????height: 0; ???????????????border-width:1px 0 0 0; ???????????????border-color:#a21; ???????????} ???????????25%{ ???????????????top:-21px; ???????????????left:-21px; ???????????????width:0; ???????????????height:340px; ???????????????border-width:0 0 0 1px; ???????????????border-color:rgba(40, 201, 40, 0.904); ???????????} ???????????50%{ ???????????????top:318px; ???????????????left:-21px; ???????????????width: 240px; ???????????????height: 0; ???????????????border-width:0 0 1px 0; ???????????????border-color:rgb(204, 74, 14); ???????????} ???????????75%{ ???????????????top:-21px; ???????????????left:218px; ???????????????width: 0; ???????????????height: 340px; ???????????????border-width:0 1px 0 0; ???????????????border-color:rgb(160, 170, 17); ???????????} ???????????100%{ ???????????????top:-21px; ???????????????left:-21px; ???????????????width: 240px; ???????????????height: 0; ???????????????border-width:1px 0 0 0; ???????????????border-color:rgb(224, 53, 224); ???????????} ???????} ???</style></head><body> ???<div class="around"></div></body>
效果如下：
这样，我们轻松实现了边框滚动效果，只用了一个div标签，很简单吧
CSS3动画结合伪元素实现边框滚动效果
原文地址：https://www.cnblogs.com/wk-ba/p/10340827.html