使用css3实现边框动画效果_边框加律动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41054215/article/details/108221826

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
   body{
       background-color:#00f;
   }
ul{
list-style: none;
}
.xf{
margin:50px 5%;
}
.xf-top{
height:50px;
line-height:50px;
text-align:center;
position:relative;
font-size:24px;
color:rgba(255,255,255,0.87);
}
.xf-top>div{
width:50px;
height:50px;
position:absolute;
}
.xf-top>div img{
width:100%;
height:auto;
}

.xf-middle{
font-size:36px;
color:rgba(255,255,255,0.87);
letter-spacing: 0.32em;
height:120px;
line-height: 120px;
text-align:center;
}
.xf-bottom ul{
margin:0;
padding:0;
color:rgba(217,217,25,0);
margin-top:170px;
text-align:center;
}
.bb::before, .bb::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.xf-bottom .bb{
position: relative;
width:240px;
height:240px;
display:inline-block;
margin-right:15px;
/*outline:1px solid rgba(255,255,255,0.85);*/
margin-bottom:36px;
/*padding-bottom:100px;*/
box-shadow: inset 0 0 0 1px rgba(157, 136, 0, 0.75);
text-align:center;
}
.xf-bottom li>img{
width:50%;
padding:36px 25% 20px 25%;
}
.bb1::after {
content: '';
z-index: -1;
margin: -3%;
box-shadow: inset 0 0 0 2px rgba(217,217,25,1);
/*color:rgba(217,217,25,1);*/
animation: play 4s linear 1;
-webkit-animation: play 4s linear 1;
}
.bb2::after {
content: '';
z-index: -1;
margin: -3%;
box-shadow: inset 0 0 0 2px rgba(217,217,25,1);
/*color:rgba(217,217,25,1);*/
animation: play 4s 4s linear 1;
-webkit-animation: play 4s 4s linear 1;
}
.bb3::after {
content: '';
z-index: -1;
margin: -3%;
box-shadow: inset 0 0 0 2px rgba(217,217,25,1);
/*color:rgba(217,217,25,1);*/
animation: play 4s 8s linear 1;
-webkit-animation: play 4s 8s linear 1;
}
.bb4::after {
content: '';
z-index: -1;
margin: -3%;
box-shadow: inset 0 0 0 2px rgba(217,217,25,1);
/*color:rgba(217,217,25,1);*/
animation: play 4s 12s linear 1;
-webkit-animation: play 4s 12s linear 1;
}
.bb5::after {
content: '';
z-index: -1;
margin: -3%;
box-shadow: inset 0 0 0 2px rgba(217,217,25,1);
/*color:rgba(217,217,25,1);*/
animation: play 4s 16s linear 1;
-webkit-animation: play 4s 16s linear 1;
}
.bb6::after {
content: '';
z-index: -1;
margin: -3%;
box-shadow: inset 0 0 0 2px rgba(217,217,25,1);
/*color:rgba(217,217,25,1);*/
animation: play 4s 20s linear 1;
-webkit-animation: play 4s 20s linear 1;
}
/*.bb:hover::after{
box-shadow: inset 0 0 0 2px;
animation: play 4s linear 1;
}*/
@keyframes play {
0% {
clip: rect(0px, 260.0px, 2px, 0px);
}
25% {
clip: rect(0px, 260.0px, 260.0px, 258.0px);
}
50% {
clip: rect(258.0px, 260.0px, 260.0px, 0px);

}
75% {
clip: rect(0px, 2px, 260.0px, 0px);
}

}
</style>
</head>
<body>
<div class="xf">

<div class="xf-top">
<div>
<img src="./1.png">
</div>
360蓝焰卫士
</div>

<div class="xf-middle">
正在对营区进行全方位消毒...
</div>

<div class="xf-bottom">
<ul>
<li class="bb bb1">
<img src="./p1.jpg">
<span style="color:#fff;">1、营区出入口</span>
</li>
<li class="bb bb2">
<img src="./p1.jpg">
<span style="color:#fff;">2、过往通道</span>
</li>
<li class="bb bb3">
<img src="./p1.jpg">
<span style="color:#fff;">3、活动区域</span>
</li>
<li class="bb bb4">
<img src="./p1.jpg">
<span style="color:#fff;">4、就餐区域</span>
</li>
<li class="bb bb5">
<img src="./p1.jpg">
<span style="color:#fff;">5、隔离室</span>
</li>
<li class="bb bb6" style="margin-right:0;">
<img src="./p1.jpg">
<span style="color:#fff;">6、功能库室</span>
</li>
</ul>
</div>
</div>
</body>
</html>