How to Realize CSS3 Wind Speed Switching Scene Animation

How to Realize CSS3 Wind Speed Switching Scene Animation: BY Joshua13 Nov,2020; Tags:
CSS3 Animation

Introduction

Today I will share with you a CSS3-based wind speed switching scene animation. First of all, the scene screen on the page is drawn by CSS. Generally speaking, it is a windy weather scene. The windmill will rotate and the leaves will drift with the wind. At this point, you can switch the wind speed with a switch. At the same time as the wind speed changes, the speed of the windmill and the amplitude of the leaves will also change, reflecting a real windy weather, and all of this is done through the animation features of CSS3 of.

How to Realize CSS3 Wind Speed Switching Scene Animation

Instructions

HTML Body Code

<ul class="honeycomb" lang="es">
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="images/1.jpg">
    <div class="honeycomb-cell__title">Diseño exclusivo</div>
  </li>
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="images/2.jpg">
    <div class="honeycomb-cell__title">Impermeables</div>
  </li>
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="images/3.jpg">
    <div class="honeycomb-cell__title">Tablero doble cara</div>
  </li>
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="images/4.jpg">
    <div class="honeycomb-cell__title">Maletín de empaque</div>
  </li>
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="images/5.jpg">
    <div class="honeycomb-cell__title">Antireflectivo<small>No vidrio</small></div>
  </li>
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="images/6.jpg">
    <div class="honeycomb-cell__title">6 fichas<small>1 de repuesto</small></div>
  </li>
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="images/7.jpg">
    <div class="honeycomb-cell__title">Tablero magnético</div>
  </li>
  <li class="honeycomb-cell honeycomb__placeholder"></li>
</ul>

Css Code

.honeycomb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  -webkit-transform: translateY(34.375px);
          transform: translateY(34.375px);
}
.honeycomb-cell {
  flex: 0 1 250px;
  max-width: 250px;
  height: 137.5px;
  margin: 65.4761904762px 12.5px 25px;
  position: relative;
  padding: 0.5em;
  text-align: center;
  z-index: 1;
}
.honeycomb-cell__title {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  word-break: break-word;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  font-size: 1.75em;
  transition: opacity 350ms;
}

VIEW NOW