animation d'ondulation CSS-tutoriel HTML-php.cn

animation d'ondulation CSS

韦小宝

Libérer： 2017-11-18 10:41:58

original

2243 Les gens l'ont consulté

animation d'ondulation CSS, effet d'animation, code source gratuit~~Pas besoin de dépenser de l'argent pour l'étudier~~

animation dondulation CSS

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>

Copier après la connexion

Prenez-le et étudiez-le gratuitement ! D'autres bons codes sources sont disponibles sur le Site Web PHP chinois, suivez-nous pour vous donner un bon aperçu~

Recommandations associées :

jquery implémente le code source de déverrouillage par gestes

Js natif implémente le code source de la boîte de div d'invite mobile

css Réaliser une tête de chat en mouvement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!