欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css波纹动画

程序员文章站 2022-06-03 09:08:49
...
css波纹动画动画效果,免费提供源码~~不要钱拿去研究吧~~

css波纹动画

代码:

<!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="http://www.php.cn/"></a>
			<div class="vr_wrap"></div>
			<div class="vr_wrap2"></div>
		</div>
	</body>

</html>

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

相关推荐:

jquery实现手势解锁源码

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

css实现会动的猫脸

以上就是css波纹动画的详细内容,更多请关注其它相关文章!