<div class="wrapper">
  <div class="flag">
    <div class="wave"></div>
    <div class="top"></div>
    <div class="middle">
      <div class="wheel">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
   </div>
   <div class="bottom"></div>
  </div>
</div>
         
     
.wrapper{
  display: flex;
  justify-content: center;
  margin-top: 8rem
}
.flag{
  width: 270px;
  height: 180px;
  box-shadow: 0px 0px 90px 1px #989;
  background-color: transparent;
  position: relative;
 }
.top{
  height: 60px;
  background-color: #ff9933
}
.middle{
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom{
  height: 60px;
  background-color: green;
}
.wheel {
  height: 43px;
  width: 43px;
  border: 1px solid darkblue;
  border-radius: 45px;
  position: relative;
  margin: 0 auto;
  animation-name: wheel;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-timing-function: linear;
}
.wheel .line{
  height: 100%;
  width: 1px;
  display: inline-block;
  position: absolute;
  left: 50%;
  background: darkblue;
}
.line:nth-child(1) {
  transform: rotate(15deg)
}
.line:nth-child(2) {
  transform: rotate(30deg)
}
.line:nth-child(3) {
  transform: rotate(45deg)
}
.line:nth-child(4) {
  transform: rotate(60deg)
}
.line:nth-child(5) {
  transform: rotate(75deg)
}
.line:nth-child(6) {
  transform: rotate(90deg)
}
.line:nth-child(7) {
  transform: rotate(105deg)
}
.line:nth-child(8) {
  transform: rotate(120deg)
}
.line:nth-child(9) {
  transform: rotate(135deg)
}
.line:nth-child(10) {
  transform: rotate(150deg)
}
.line:nth-child(11) {
  transform: rotate(165deg)
}
.line:nth-child(12) {
  transform: rotate(180deg)
}

@keyframes wheel {
  0%{ 
  transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
      
  }
}

.wave{
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(
    128deg,rgba(89,72,21,0) 39%,
    rgba(250,245,245,0.8474025974025974)
    46%,rgba(89,72,21,0) 53%);
  animation-name: wavy;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes wavy {
  0%{
    background-position:
      -400px 0px, -400px 0px;
      -400px 0px, -400px 0px;
  }
  100%{
    background-position: 800px 0px,
      800px 0px,800px 0px,800px 0px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.