|
|

楼主 |
发表于 2022-2-11 12:17
|
显示全部楼层
本帖最后由 绿叶清舟 于 2022-2-11 12:20 编辑
<style type="text/css">
.box{
width: 400px;
height: 400px;
box-sizing: border-box;
border: 1px solid #cb6341;
position: fixed;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
}
.box:after, .box:before{
content: "";
width: 110%;
height: 110%;
box-sizing: border-box;
border: 2px solid;
position: absolute;
top: -5%;
left: -5%;
animation: boxBorder 6s linear infinite;
}
.box:before{
animation-delay: -3s;
}
/* 布局结束 */
/* 动画开始 */
@keyframes boxBorder {
0%{
border-color: #fff;
clip: rect(200, 420px, 220px ,200);
}
25%{
border-color: yellow;
clip: rect(200, 220px, 420px ,200);
}
50%{
border-color: blue;
clip: rect(218px, 420px, 420px ,200);
}
75%{
border-color: green;
clip: rect(200, 420px, 420px ,418px);
}
100%{
border-color: aqua;
clip: rect(200, 420px, 220px ,200);
}
}
</style>
<div class="box"> <div class="icon icon1"></div> <div class="icon icon2"></div></div> |
|