标签：除了 ini 次数 rgb auto family pac size 动画
今天和大家分享一个利用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标签，很简单吧
标签：除了 ini 次数 rgb auto family pac size 动画
原文地址：https://www.cnblogs.com/wk-ba/p/10340827.html
