Home > Article > Web Front-end > Map coordinates written in css3_html/css_WEB-ITnose
Map coordinates written in css3_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:181416browse
I saw such a small thing on other websites and found it interesting, so I made it as an example. It only supports browsers with webkit core.
html code
<!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);}}
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn