css实例——定位效果

静态效果图如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3定位图标</title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			 html body{min-height:100%;background:#2F2F2F;}
			 .pin{position:absolute;top:50%;left:50%;}
			 .pin{margin:-20px 0 0 -20px;width:30px;height:30px;background:#89849b;border-radius:50% 50% 50% 0;-webkit-transform:rotate(-45deg);-webkit-animation-name:bounce;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;}
			 .pin:after{position:absolute;content:"";margin:8px 0px 0px 8px; width:14px;height:14px;background:#2F2F2F;border-radius:50%;}
			 .pulse{position:absolute;top: 50%;left: 50%;}
			 .pulse{z-index:-2; margin:11px 0px 0px -12px;width: 14px;height: 14px;background:rgba(0,0,0,0.2);border-radius:50%;-webkit-transform:rotateX(55deg);}
			 .pulse:after{position: absolute;content:""; margin: -13px 0 0 -13px;width:40px;height: 40px;opacity:0.0;-webkit-box-shadow:0 0 1px 2px #89849b;border-radius:50%;-webkit-animation: pulsate 1s infinite 1.1s ease-out}		
			 @-webkit-keyframes bounce{
			 	0%{opacity:0;-webkit-transform:translateY(-2000px); }
			 	60%{opacity:1;-webkit-transform:translateY(30px) rotate(-45px);}
			 	80%{-webkit-transform:translateY(-10px)  rotate(-45px);}
			 	100%{-webkit-transform:translateY(0px) rotate(-45px);}
			 } 
			@-webkit-keyframes pulsate{
				 0%{opacity:0;-webkit-transform:scale(0.1,0.1);}		    
				 50%{opacity:1;}
				 100%{opacity: 0;-webkit-transform:scale(1.2,1.2);}
			}
		</style>
	</head>
	<body>
		<div class='pin'></div>
		<div class='pulse'></div>
	</body>
</html>

　　

 

posted on 2017-12-07 14:33  木之子梦之蝶  阅读(934)  评论(0)    收藏  举报

导航