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>
DO What You Want !