css3写的地图坐标_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:49:181412검색
看到别的网站有个这么个小东西，感觉挺有趣就模范着做了下，只支持了webkit内核的 浏览器。
html代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/demo_1.css" /></head><body><div class='pin'></div><div class='pulse'></div></body></html>css3代码html {height: 100%;}body {background: #2f2f2f;}.pin{width: 100px;height: 100px;position: absolute;left: 50%;top: 50%;background: #89849b;-webkit-transform: rotate(-45deg);-webkit-border-radius: 50% 50% 50% 0;-webkit-animation: 1s bounce;}.pin:after{content: “”;width: 40px;margin: 30px 0 0 30px;height: 40px;background:#2f2f2f;-webkit-border-radius: 50%;position: absolute;}.pulse {background: rgba(0,0,0,0.2);-webkit-border-radius: 50%;border-radius: 50%;height: 40px;width: 40px;position: absolute;left: 50%;top: 50%;margin: 105px 0px 0px 30px;-webkit-transform: rotateX(65deg);z-index: -2;}.pulse:after{content: “”;width: 120px;height: 120px;position: absolute;-webkit-box-shadow: 0 0 1px 2px #89849b;-webkit-border-radius: 50%;margin: -40px 0 0 -40px;-webkit-animation: 1s mapLight infinite;-webkit-animation-delay: 1.2s;}@-webkit-keyframes mapLight{0%{opacity: 0;-webkit-transform: scale(0.1,0.1);}50{opacity: 1;}100{-webkit-transform: scale(1.2,1.2);opacity: 0;}}@-webkit-keyframes bounce{0%{opacity: 0;-webkit-transform: translateY(-2000px) rotate(-45deg);}60%{opacity: 1;-webkit-transform: translateY(30px) rotate(-45deg);}80%{-webkit-transform: translateY(-10px) rotate(-45deg);}100%{-webkit-transform: translateY(0) rotate(-45deg);}}
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.