css从中心向外渐变

//复制代码即可,里面有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>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

原克技术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值