标签：
看到别的网站有个这么个小东西，感觉挺有趣就模范着做了下，只支持了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); } }
标签：
原文地址：http://www.cnblogs.com/wulianghai/p/4287873.html
