search

Home  >  Article  >  Web Front-end  >  css ripple animation

css ripple animation

韦小宝
韦小宝Original
2017-11-18 10:41:582210browse

css ripple animation, animation effect, free source code~~No need to spend money to study it~~

css ripple animation

Code: 

<!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>

Get it for free and study it! More good source codes are available on PHP Chinese website, follow us and give you a good look~

Related recommendations:

jquery implements gesture unlock source code

Native js implements movable prompt div box source code

css Realize moving cat face

The above is the detailed content of css ripple animation. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery implements gesture unlocking source codeNext article：jquery implements gesture unlocking source code

Related articles

See more