用css打造这个图案
html代码
<div class="an"></div>
css代码
body {
height: 100%;
background: #34588e;
display: flex;
justify-content:center;
align-items:center;
}
.an{
border-radius: 50%;
background: #34588e;
height: 300px;
overflow: hidden;
width: 300px;
border: 10px solid #fff;
animation:shake .2s infinite alternate;
position: relative;
}
.an:before{
content:"";
position:absolute;
top: -275px;
left: -300px;
width: 500px;
height: 500px;
background: red;
border-radius:50%;
z-index: 2;
}
.an:after{
background: #fff;
height: 400px;
width: 500px;
content: "";
position: absolute;
top: -170px;
left: -240px;
z-index: 1;
border-radius:25%;
transform: rotate(-15deg);
}
@keyframes shake{
0%{transform:translateX(-5px)}
100%{transform:translateX(5px)}
}
利用before和after,before设置为红色部分并把它的边框设置为圆的,after先同样设置
border-radius:25%;
然后进行旋转一定的角度,就完成这个图案。
然后再加个动画,让它不断地抖动