//复制代码即可,里面有circle-scale,circle-scale2,circle-scale3三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./jquery.js"></script>
<title>查看更多</title>
<style>
@-webkit-keyframes circle-scale {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
10% {
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.1;
}
20% {
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0.2;
}
30% {
-moz-transform: scale(1.8);
-ms-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
opacity: 0.3;
}
40% {
-moz-transform: scale(2.4);
-ms-transform: scale(2.4);
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0.15;
}
50% {
-moz-transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
100% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@-moz-keyframes circle-scale {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
10% {
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.1;
}
20% {
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0.2;
}
30% {
-moz-transform: scale(1.8);
-ms-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
opacity: 0.3;
}
40% {
-moz-transform: scale(2.4);
-ms-transform: scale(2.4);
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0.15;
}
50% {
-moz-transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
100% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@-o-keyframes circle-scale {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
10% {
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.1;
}
20% {
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0.2;
}
30% {
-moz-transform: scale(1.8);
-ms-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
opacity: 0.3;
}
40% {
-moz-transform: scale(2.4);
-ms-transform: scale(2.4);
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0.15;
}
50% {
-moz-transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
100% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@keyframes circle-scale {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
10% {
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.1;
}
20% {
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0.2;
}
30% {
-moz-transform: scale(1.8);
-ms-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
opacity: 0.3;
}
40% {
-moz-transform: scale(2.4);
-ms-transform: scale(2.4);
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0.15;
}
50% {
-moz-transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
100% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@-webkit-keyframes circle-scale2 {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
10% {
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0.1;
}
20% {
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
opacity: 0.2;
}
30% {
-moz-transform: scale(2.1);
-ms-transform: scale(2.1);
-webkit-transform: scale(2.1);
transform: scale(2.1);
opacity: 0.3;
}
40% {
-moz-transform: scale(2.8);
-ms-transform: scale(2.8);
-webkit-transform: scale(2.8);
transform: scale(2.8);
opacity: 0.15;
}
50% {
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-webkit-transform: scale(3.5);
transform: scale(3.5);
opacity: 0;
}
100% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@-moz-keyframes circle-scale2 {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
10% {
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0.1;
}
20% {
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
opacity: 0.2;
}
30% {
-moz-transform: scale(2.1);
-ms-transform: scale(2.1);
-webkit-transform: scale(2.1);
transform: scale(2.1);
opacity: 0.3;
}
40% {
-moz-transform: scale(2.8);
-ms-transform: scale(2.8);
-webkit-transform: scale(2.8);
transform: scale(2.8);
opacity: 0.15;
}
50% {
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-webkit-transform: scale(3.5);
transform: scale(3.5);
opacity: 0;
}
100% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@-o-keyframes circle-scale2 {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
10% {
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0.1;
}
20% {
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
opacity: 0.2;
}
30% {
-moz-transform: scale(2.1);
-ms-transform: scale(2.1);
-webkit-transform: scale(2.1);
transform: scale(2.1);
opacity: 0.3;
}
40% {
-moz-transform: scale(2.8);
-ms-transform: scale(2.8);
-webkit-transform: scale(2.8);
transform: scale(2.8);
opacity: 0.15;
}
50% {
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-webkit-transform: scale(3.5);
transform: scale(3.5);
opacity: 0;
}
100% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@keyframes circle-scale2 {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
10% {
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0.1;
}
20% {
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
opacity: 0.2;
}
30% {
-moz-transform: scale(2.1);
-ms-transform: scale(2.1);
-webkit-transform: scale(2.1);
transform: scale(2.1);
opacity: 0.3;
}
40% {
-moz-transform: scale(2.8);
-ms-transform: scale(2.8);
-webkit-transform: scale(2.8);
transform: scale(2.8);
opacity: 0.15;
}
50% {
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-webkit-transform: scale(3.5);
transform: scale(3.5);
opacity: 0;
}
100% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@-webkit-keyframes circle-scale3 {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
10% {
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.1;
}
20% {
-moz-transform: scale(1.6);
-ms-transform: scale(1.6);
-webkit-transform: scale(1.6);
transform: scale(1.6);
opacity: 0.2;
}
30% {
-moz-transform: scale(2.4);
-ms-transform: scale(2.4);
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0.3;
}
40% {
-moz-transform: scale(3.2);
-ms-transform: scale(3.2);
-webkit-transform: scale(3.2);
transform: scale(3.2);
opacity: 0.15;
}
50% {
-moz-transform: scale(4);
-ms-transform: scale(4);
-webkit-transform: scale(4);
transform: scale(4);
opacity: 0;
}
100% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@-moz-keyframes circle-scale3 {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
10% {
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.1;
}
20% {
-moz-transform: scale(1.6);
-ms-transform: scale(1.6);
-webkit-transform: scale(1.6);
transform: scale(1.6);
opacity: 0.2;
}
30% {
-moz-transform: scale(2.4);
-ms-transform: scale(2.4);
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0.3;
}
40% {
-moz-transform: scale(3.2);
-ms-transform: scale(3.2);
-webkit-transform: scale(3.2);
transform: scale(3.2);
opacity: 0.15;
}
50% {
-moz-transform: scale(4);
-ms-transform: scale(4);
-webkit-transform: scale(4);
transform: scale(4);
opacity: 0;
}
100% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@-o-keyframes circle-scale3 {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
10% {
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.1;
}
20% {
-moz-transform: scale(1.6);
-ms-transform: scale(1.6);
-webkit-transform: scale(1.6);
transform: scale(1.6);
opacity: 0.2;
}
30% {
-moz-transform: scale(2.4);
-ms-transform: scale(2.4);
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0.3;
}
40% {
-moz-transform: scale(3.2);
-ms-transform: scale(3.2);
-webkit-transform: scale(3.2);
transform: scale(3.2);
opacity: 0.15;
}
50% {
-moz-transform: scale(4);
-ms-transform: scale(4);
-webkit-transform: scale(4);
transform: scale(4);
opacity: 0;
}
100% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@keyframes circle-scale3 {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
10% {
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.1;
}
20% {
-moz-transform: scale(1.6);
-ms-transform: scale(1.6);
-webkit-transform: scale(1.6);
transform: scale(1.6);
opacity: 0.2;
}
30% {
-moz-transform: scale(2.4);
-ms-transform: scale(2.4);
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0.3;
}
40% {
-moz-transform: scale(3.2);
-ms-transform: scale(3.2);
-webkit-transform: scale(3.2);
transform: scale(3.2);
opacity: 0.15;
}
50% {
-moz-transform: scale(4);
-ms-transform: scale(4);
-webkit-transform: scale(4);
transform: scale(4);
opacity: 0;
}
100% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
.sss{
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -15px;
width: 30px;
height: 30px;
border-radius: 50%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
background: #c84228;
/* animation: circle-scale 3s 0.2s ease-out infinite; */
animation: circle-scale2 3s 0.2s ease-out infinite;
/* animation: circle-scale3 3s 0.2s ease-out infinite; */
}
</style>
</head>
<body>
<div class="sss"></div>
</body>
</html>
css从中心向外渐变
最新推荐文章于 2023-08-26 18:18:28 发布