今天和大家分享一个利用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标签，很简单吧
原文地址：https://www.cnblogs.com/wk-ba/p/10340827.html
时间： 2024-08-02 01:07:40