實(shí)現(xiàn)效果
bandicam 2020-02-24 15-32-19-193.gif
實(shí)現(xiàn)代碼
//html
<div class="coment">
<div class="ima">
<div class="cc"></div>
<div class="cc cc1"></div>
<div class="cc cc2"></div>
<div class="cc cc3"></div>
<div class="cc cc4"></div>
<div class="image">
<img src="https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/img/friend-net.png" alt="">
</div>
</div>
</div>
//less
.coment {
width: 1200px;
height: 100vh;
margin: 100px auto;
background-color: purple;
.ima {
float: right;
position: relative;
width: 816px;
height: 910px;
background-color: #fff;
.cc {
position: absolute;
width: 20px;
height: 20px;
opacity: 1;
background-color: #9cdeff;
border-radius: 50%;
top: 50%;
left: 49.5%;
transform: translate(-50%, -50%);
animation: circulmove 4s infinite linear;
}
.cc1 {
animation: circulmove 4s 1s infinite linear;
}
.cc2 {
animation: circulmove 4s 2s infinite linear;
}
.cc3 {
animation: circulmove 4s 3s infinite linear;
}
.cc4 {
animation: circulmove 4s 4s infinite linear;
}
.image {
position: absolute;
z-index: 999;
}
}
}
@keyframes circulmove {
0% {
width: 20px;
height: 20px;
opacity: 1;
}
100% {
width: 816px;
height: 910px;
opacity: 0;
}
}
項(xiàng)目解說
以上代碼只是項(xiàng)目中的一部分,但是已經(jīng)可以完全明了的解釋以上的問題,可以直接賦值代碼,查看效果,如果你在其中發(fā)現(xiàn)了什么問題,請慷慨提出來,大家一起進(jìn)步
