La animación de gelatina en Animation.css usa CSS para escribir el código de animación para agitar ramas.

El efecto es:

sucursales

HTML:

<div class="background-tree">
  <div class="tree-left"></div>
  <div class="tree-right"></div>
</div>

css (ponga su propia imagen en la URL y luego modifique el valor en @keyframe para lograr el efecto deseado) 

.background-tree {
  overflow: hidden;

  .tree-left {
    position: absolute;
    left: -16vw;
    top: 34vw;
    width: 39.2vw;
    height: 38.27vw;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: 100%;
    animation-name: jello;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: -1;
  }

  @keyframes jello {

    from,
    11.1%,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    44.4% {
      -webkit-transform: skewY(-1.125deg);
      transform: skewY(-1.125deg);
    }

    55.5% {
      -webkit-transform: skewY(0.5625deg);
      transform: skewY(0.5625deg);
    }

    66.6% {
      -webkit-transform: skewY(-0.78125deg);
      transform: skewY(-0.78125deg);
    }

    77.7% {
      -webkit-transform: skewY(0.890625deg);
      transform: skewY(0.890625deg);
    }

    88.8% {
      -webkit-transform: skewY(-0.1953125deg);
      transform: skewY(-0.1953125deg);
    }

  }

  .tree-right {
    position: absolute;
    right: -3vw;
    top: 27vw;
    width: 32.27vw;
    height: 31.47vw;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: 100%;
    animation-name: jello;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: linear;
    z-index: -1;
  }
}

Supongo que te gusta

Origin blog.csdn.net/qq_56715703/article/details/133018966
Recomendado
Clasificación