看到别的网站有个这么个小东西，感觉挺有趣就模范着做了下，只支持了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);}}
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
379
收藏
