css波纹动画

韦小宝 原创: 2017-11-18 10:41:58 1735浏览

css波纹动画，动画效果，免费提供源码~~不要钱拿去研究吧~~

7V$A(MY`[T%FDKM3`XL8G2N.png

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>PHP中文网</title>
		<style>
			body{
				background: #000;
			}
			.box{
				width: 100%;
				height: 600px;
				background: #000;
			}
			.vr {
				display: block;
				width: 71px;
				height: 71px;
				border-radius: 50%;
				position: absolute;
				left: 18px;
				top: 22px;
				background:#98FB98 url(../imges/new_img/vr.png) no-repeat left top;
				background-size: 100% 100%;
				z-index: 99;
			}
			
			.vr_wrap {
				background: #fff;
				opacity: 0.7;
				filter: alpha(opacity=70);
				width: 71px;
				height: 71px;
				border-radius: 50%;
				position: absolute;
				left: 18px;
				top: 22px;
				box-shadow: 0px 0px 50px 10px #fbfbfb;
				animation: mymove 2s infinite;
				/*animation-direction:alternate;*/
				border-radius: 50%;
			}
			
			.vr_wrap2 {
				background: #fff;
				opacity: 0.9;
				filter: alpha(opacity=90);
				border-radius: 50%;
				width: 71px;
				height: 71px;
				border-radius: 50%;
				position: absolute;
				left: 18px;
				top: 22px;
				box-shadow: 0px 0px 50px 10px #fbfbfb;
				animation: mymove1 2s infinite;
				/*animation-direction:alternate;*/
			}
			
			@keyframes mymove {
				0% {
					box-shadow: 0px 0px 0px 2px #fff;
					height: 71px;
					width: 71px;
				}
				100% {
					box-shadow: 0px 0px 0px 20px #fff;
					height: 72px;
					width: 72px;
				}
				100% {
					opacity: 0;
					filter: alpha(opacity=0);
				}
			}
			
			@keyframes mymove1 {
				0% {
					box-shadow: 0px 0px 0px 2px #fff;
					height: 71px;
					width: 71px;
				}
				50% {
					box-shadow: 0px 0px 0px 20px #fff;
					height: 72px;
					width: 72px;
					opacity: 0;
				}
				100% {
					opacity: 0;
					filter: alpha(opacity=0);
				}
			}
		</style>
	</head>

	<body>
		<div class="box">
			<a class="vr" href="//m.sbmmt.com/"></a>
			<div class="vr_wrap"></div>
			<div class="vr_wrap2"></div>
		</div>
	</body>

</html>

免费拿去研究吧！更多好的源码尽在PHP中文网，关注我们给你好看哦~

相关推荐：

jquery实现手势解锁源码

原生js实现可移动的提示div框源码

css实现会动的猫脸

以上就是css波纹动画的详细内容，更多请关注php中文网其它相关文章！

样式表 css 动画 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：jquery实现手势解锁源码下一条：css 、jquery实现3d立体旋转