html涟漪效果,涟漪效果.html

涟漪效果

.video-player a {

display: inline-block;

width: 80px;

height: 80px;

border-radius: 50%;

line-height: 80px;

text-align: center;

background-color: #ff6348;

color: #fff;

position: relative

}

.video-player a:after {

content: "";

position: absolute;

left: -7px;

top: -7px;

height: 90px;

width: 90px;

border: 3px solid #ff6348;

border-radius: 50%;

-webkit-animation: icon-bubble 1s infinite forwards linear;

animation: icon-bubble 1s infinite forwards linear;

}

.video-player a:before {

content: "";

position: absolute;

left: -7px;

top: -7px;

height: 90px;

width: 90px;

border: 3px solid #ff6348;

border-radius: 50%;

-webkit-animation: icon-bubble 1s infinite forwards linear 0.5s;

animation: icon-bubble 1s infinite forwards linear 0.5s;

}

@-webkit-keyframes icon-bubble {

0% {

-webkit-transform: scale(0.85);

transform: scale(0.85);

opacity: 1;

}

25% {

-webkit-transform: scale(1.05);

transform: scale(1.05);

opacity: 0.8;

}

50% {

-webkit-transform: scale(1.2);

transform: scale(1.2);

opacity: 0.55;

}

75% {

-webkit-transform: scale(1.32);

transform: scale(1.32);

opacity: 0.3;

}

100% {

-webkit-transform: scale(1.4);

transform: scale(1.4);

opacity: 0;

}

}

@-webkit-keyframes icon-bubble {

0% {

-webkit-transform: scale(0.85);

transform: scale(0.85);

opacity: 1;

}

25% {

-webkit-transform: scale(1.05);

transform: scale(1.05);

opacity: 0.8;

}

50% {

-webkit-transform: scale(1.2);

transform: scale(1.2);

opacity: 0.55;

}

75% {

-webkit-transform: scale(1.32);

transform: scale(1.32);

opacity: 0.3;

}

100% {

-webkit-transform: scale(1.4);

transform: scale(1.4);

opacity: 0;

}

}

@keyframes icon-bubble {

0% {

-webkit-transform: scale(0.85);

transform: scale(0.85);

opacity: 1;

}

25% {

-webkit-transform: scale(1.05);

transform: scale(1.05);

opacity: 0.8;

}

50% {

-webkit-transform: scale(1.2);

transform: scale(1.2);

opacity: 0.55;

}

75% {

-webkit-transform: scale(1.32);

transform: scale(1.32);

opacity: 0.3;

}

100% {

-webkit-transform: scale(1.4);

transform: scale(1.4);

opacity: 0;

}

}

涟漪效果

一键复制

编辑

Web IDE

原始数据

按行查看

历史