css百事可乐

用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%;

然后进行旋转一定的角度，就完成这个图案。

然后再加个动画，让它不断地抖动