效果如下：
效果图
源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.banner_dot i{
-webkit-animation-play-state:running;
-moz-animation-play-state:running;
animation-play-state:running}
.banner_dot i:after,.banner_dot i:before{
-webkit-animation-play-state:running;
-moz-animation-play-state:running;
animation-play-state:running}
@-webkit-keyframes dotAni{0%{-webkit-transform:translate(0);transform:translate(0)}100%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@-moz-keyframes dotAni{0%{-moz-transform:translate(0);transform:translate(0)}100%{-moz-transform:translateY(-5px);transform:translateY(-5px)}}@keyframes dotAni{0%{-webkit-transform:translate(0);-moz-transform:translate(0);transform:translate(0)}100%{-webkit-transform:translateY(-5px);-moz-transform:translateY(-5px);transform:translateY(-5px)}}
@-webkit-keyframes dotAni2{0%{-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);opacity:1}100%{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity:0}}@-moz-keyframes dotAni2{0%{-moz-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);opacity:1}100%{-moz-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity:0}}@keyframes dotAni2{0%{-webkit-transform:translate(-50%,-50%) scale(0);-moz-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);opacity:1}100%{-webkit-transform:translate(-50%,-50%) scale(1);-moz-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity:0}}
@-webkit-keyframes ani_zfb{0%,6%{opacity:0}30%{opacity:1;-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}40%,45%{opacity:.5;-webkit-transform:translate(0) scale(.5);transform:translate(0) scale(.5)}55%,74%{opacity:1;-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}94%,100%{opacity:0}}@-moz-keyframes ani_zfb{0%,6%{opacity:0}30%{opacity:1;-moz-transform:translate(0) scale(1);transform:translate(0) scale(1)}40%,45%{opacity:.5;-moz-transform:translate(0) scale(.5);transform:translate(0) scale(.5)}55%,74%{opacity:1;-moz-transform:translate(0) scale(1);transform:translate(0) scale(1)}94%,100%{opacity:0}}@keyframes ani_zfb{0%,6%{opacity:0}30%{opacity:1;-webkit-transform:translate(0) scale(1);-moz-transform:translate(0) scale(1);transform:translate(0) scale(1)}40%,45%{opacity:.5;-webkit-transform:translate(0) scale(.5);-moz-transform:translate(0) scale(.5);transform:translate(0) scale(.5)}55%,74%{opacity:1;-webkit-transform:translate(0) scale(1);-moz-transform:translate(0) scale(1);transform:translate(0) scale(1)}94%,100%{opacity:0}}
.banner_dot{
position:relative;
width: 100%;
height: 500px;
background: skyblue;
}
.banner_dot i:nth-child(1){-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}
.banner_dot i:nth-child(1):after,.banner_dot i:nth-child(1):before{-webkit-animation:dotAni2 8s -6s ease infinite;-moz-animation:dotAni2 8s -6s ease infinite;animation:dotAni2 8s -6s ease infinite}
.banner_dot_zfb{
position:absolute;
width:50px;
height:50px;
top:50px;
left:50px;
-moz-border-radius:100%;
border-radius:100%;
z-index:4;
-webkit-box-shadow:0 0 5px rgba(0,0,0,.1);
-moz-box-shadow:0 0 5px rgba(0,0,0,.1);
box-shadow:0 0 5px rgba(0,0,0,.1);
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;transform-origin:50% 50%;
-webkit-animation:ani_zfb 24s ease infinite;
-moz-animation:ani_zfb 24s ease infinite;
animation:ani_zfb 24s ease infinite}
.banner_dot_zfb span{
position:absolute;
width:100%;height:100%;
-moz-border-radius:100%;
border-radius:100%;
background-color:#fb8e17;
background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU0LjEgKDc2NDkwKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5pY29uX3pmYjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJpY29uX3pmYiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTcuMDIwMDI5NDcsMTcuNzg1OTE5NyBMNS41LDE2LjkwODMzMDIgQzQuODgxMTk3ODUsMTYuNTUxMDY0NyA0LjUsMTUuODkwODEwNiA0LjUsMTUuMTc2Mjc5NCBMNC41LDExLjExNzI1MyBMNC41LDkuOTYyNTUyNDcgTDQuNSw4LjgyNTQyNjQ4IEM0LjUsOC4xMTA4OTUzIDQuODgxMTk3ODUsNy40NTA2NDEyNiA1LjUsNy4wOTMzNzU2NyBMMTEsMy45MTc5NDkxOSBDMTEuNjE4ODAyMiwzLjU2MDY4MzYgMTIuMzgxMTk3OCwzLjU2MDY4MzYgMTMsMy45MTc5NDkxOSBMMTYuNTM1ODY4OSw1Ljk1OTM4NDA2IEwxNi45NjQ4OTMyLDYuMjA3MDgxMzUgTDE4LjUsNy4wOTMzNzU2NyBDMTkuMTE4ODAyMiw3LjQ1MDY0MTI2IDE5LjUsOC4xMTA4OTUzIDE5LjUsOC44MjU0MjY0OCBMMTkuNSwxMi45MDIzMDI3IEwxOS41LDE0LjA1NzAwMzIgTDE5LjUsMTUuMTc2Mjc5NCBDMTkuNSwxNS44OTA4MTA2IDE5LjExODgwMjIsMTYuNTUxMDY0NyAxOC41LDE2LjkwODMzMDIgTDEzLDIwLjA4Mzc1NjcgQzEyLjM4MTE5NzgsMjAuNDQxMDIyMyAxMS42MTg4MDIyLDIwLjQ0MTAyMjMgMTEsMjAuMDgzNzU2NyBMNy40OTk5NzA1MywxOC4wNjMwMTM4IEw3LjAyMDAyOTQ3LDE3Ljc4NTkxOTcgWiBNMTUuOTY5MjkyMSwxMi4wMTg1NDgxIEwxMi4wMDUxOTA1LDkuNzI5ODcyOTggTDguMDUxMDg4OTEsMTIuMDEyNzc0NiBMMTIuMDE1MTkwNSwxNC4zMDE0NDk3IEwxNS45NjkyOTIxLDEyLjAxODU0ODEgWiBNMTYuOTY5MjkyMSwxMi41OTU4OTg0IEw4LjU5NTI2OTk5LDE3LjQzMDY0MjMgTDExLDE4LjgxOTAxMzkgQzExLjYxODgwMjIsMTkuMTc2Mjc5NCAxMi4zODExOTc4LDE5LjE3NjI3OTQgMTMsMTguODE5MDEzOSBMMTcuNSwxNi4yMjA5Mzc2IEMxOC4xMTg4MDIyLDE1Ljg2MzY3MjEgMTguNSwxNS4yMDM0MTggMTguNSwxNC40ODg4ODY4IEwxOC41LDEzLjQ3OTY1MyBMMTYuOTY5MjkyMSwxMi41OTU4OTg0IFogTTcuNTk1MjY5OTksMTYuODUzMjkyMSBMMTEuMDE1MTkwNSwxNC44Nzg4IEw1LjUsMTEuNjk0NjAzMyBMNS41LDE0LjQ4ODg4NjggQzUuNSwxNS4yMDM0MTggNS44ODExOTc4NSwxNS44NjM2NzIxIDYuNSwxNi4yMjA5Mzc2IEw3LjU5NTI2OTk5LDE2Ljg1MzI5MjEgWiBNMTUuNjMxMTY4NCw2LjQ4MTcxMzE2IEwxMyw0Ljk2MjYwNzM5IEMxMi4zODExOTc4LDQuNjA1MzQxOCAxMS42MTg4MDIyLDQuNjA1MzQxOCAxMSw0Ljk2MjYwNzM5IEw2LjUsNy41NjA2ODM2IEM1Ljg4MTE5Nzg1LDcuOTE3OTQ5MTkgNS41LDguNTc4MjAzMjMgNS41LDkuMjkyNzM0NDEgTDUuNSwxMC41Mzk5MDI3IEw3LjA1MTA4ODkxLDExLjQzNTQyNDMgTDE1LjYzMTE2ODQsNi40ODE3MTMxNiBaIE0xNi42MzExNjg0LDcuMDU5MDYzNDMgTDEzLjAwNTE5MDUsOS4xNTI1MjI3MSBMMTguNSwxMi4zMjQ5NTI0IEwxOC41LDkuMjkyNzM0NDEgQzE4LjUsOC41NzgyMDMyMyAxOC4xMTg4MDIyLDcuOTE3OTQ5MTkgMTcuNSw3LjU2MDY4MzYgTDE2LjYzMTE2ODQsNy4wNTkwNjM0MyBaIiBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGw9IiNGRkZGRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=);
-moz-background-size:80%;
background-size:80%;background-position:50%;
background-repeat:no-repeat;z-index:1}
.banner_dot_zfb:after,.banner_dot_zfb:before{
content:"";position:absolute;
-moz-border-radius:100%;border-radius:100%;
left:50%;top:50%;-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;
transform-origin:50% 50%;opacity:0;background:#fb8e17}
.banner_dot_zfb:before{width:90px;height:90px}
.banner_dot_zfb:after{width:110px;height:110px}
</style>
</head>
<body>
<div class="banner_dot">
<i class="banner_dot_zfb"><span></span></i>
</div>
</body>
</html>
网友评论