css波纹动画在移动端,css3 animation 实现波纹动画

实现效果

实现代码

//html

//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;

}

}

项目解说

以上代码只是项目中的一部分,但是已经可以完全明了的解释以上的问题,可以直接赋值代码,查看效果,如果你在其中发现了什么问题,请慷慨提出来,大家一起进步