看到别的网站有个这么个小东西，感觉挺有趣就模范着做了下，只支持了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);
}
}
时间： 2024-10-28 23:14:19