<template>
<div class="big">
<div class="box">
</div>
</div>
</template>
<script>
export default {
name:'App'
}
</script>
<style scoped lang='scss'>
.big{
height:100vh;
width: 100vw;
background-color:#000;
}
.box {
border-radius: 50%;
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:1px solid #eee;
}
.box::after,.box::before {
border-radius: 50%;
/* 固定在div下 */
z-index:-1;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
/* 撑开一点大小 */
margin:-5%;
box-shadow:inset 0px 0px 2px #fff;
animation:clipMe 8s linear infinite;
}
.box::before {
content:"";
}
.box::after {
content:"";
/* 提前运动4s */
animation-delay:-4s;
}
@keyframes clipMe {
0%,100% {
clip:rect(0px,220.0px,2px,0px);
}
25% {
clip:rect(0px,2px,220.0px,0px);
}
50% {
clip:rect(218.0px,220.0px,220.0px,0px);
}
75% {
clip:rect(0px,220.0px,220.0px,218.0px);
}
}
</style>
css.png
