CSS 리플 애니메이션-HTML 튜토리얼-php.cn

CSS 리플 애니메이션

韦小宝

풀어 주다： 2017-11-18 10:41:58

원래의

2192명이 탐색했습니다.

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 제스처 잠금 해제 소스 코드

Native js 구현 이동 가능 움직이는 고양이 얼굴을 구현하는 팁 div 상자 소스 코드

css

위 내용은 CSS 리플 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!