css实现草丛中小草随风摆动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现草丛中小草随风摆动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
:root {
  --ease: cubic-bezier(.66,-0.11,.73,1.13);
  --ease: cubic-bezier(.5,0,.5,1);
}

body {
  height: 100vh;
  background: linear-gradient(to top, #b6da7d, #bfdf8d);
  overflow: hidden;
}

.ground {
  position: absolute;
  width: 400px;
  height: 0;
  bottom: 0;
  left: 0;
}

.blade-1 {
  width: 0;
  height: 0;
  border-right: 9px solid transparent;
  border-left: 18px solid transparent;
  border-bottom: 140px solid #82ab4b;
  -webkit-animation: sway var(--ease) infinite alternate;
          animation: sway var(--ease) infinite alternate;
}

.blade-2 {
  width: 0;
  height: 0;
  border-right: 11px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 120px solid #a2cb62;
  -webkit-animation: sway var(--ease) infinite alternate;
          animation: sway var(--ease) infinite alternate;
}

.blade-3 {
  width: 0;
  height: 0;
  border-right: 7px solid transparent;
  border-left: 14px solid transparent;
  border-bottom: 110px solid #658e47;
  -webkit-animation: sway var(--ease) infinite alternate;
          animation: sway var(--ease) infinite alternate;
}

.blade-4 {
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-left: 11px solid transparent;
  border-bottom: 90px solid #87ae55;
  -webkit-animation: sway var(--ease) infinite alternate;
          animation: sway var(--ease) infinite alternate;
}

[class|=blade] {
  position: absolute;
  bottom: 0;
  transform-origin: center bottom;
}

[class|=blade]:nth-child(1) {
  left: 414px;
  -webkit-animation-delay: 0.8275935247s;
          animation-delay: 0.8275935247s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

[class|=blade]:nth-child(2) {
  left: 796px;
  -webkit-animation-delay: 0.0200826998s;
          animation-delay: 0.0200826998s;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}

[class|=blade]:nth-child(3) {
  left: 717px;
  -webkit-animation-delay: 0.0610002141s;
          animation-delay: 0.0610002141s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

[class|=blade]:nth-child(4) {
  left: 456px;
  -webkit-animation-delay: 0.7383667089s;
          animation-delay: 0.7383667089s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

[class|=blade]:nth-child(5) {
  left: 783px;
  -webkit-animation-delay: 0.85765555s;
          animation-delay: 0.85765555s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

[class|=blade]:nth-child(6) {
  left: 260px;
  -webkit-animation-delay: 0.6059965723s;
          animation-delay: 0.6059965723s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

[class|=blade]:nth-child(7) {
  left: 866px;
  -webkit-animation-delay: 0.2603923476s;
          animation-delay: 0.2603923476s;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}

[class|=blade]:nth-child(8) {
  left: 225px;
  -webkit-animation-delay: 0.7150126533s;
          animation-delay: 0.7150126533s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

[class|=blade]:nth-child(9) {
  left: 457px;
  -webkit-animation-delay: 0.4978223444s;
          animation-delay: 0.4978223444s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

[class|=blade]:nth-child(10) {
  left: 90px;
  -webkit-animation-delay: 0.1515675874s;
          animation-delay: 0.1515675874s;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}

[class|=blade]:nth-child(11) {
  left: 681px;
  -webkit-animation-delay: 0.7037976844s;
          animation-delay: 0.7037976844s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

[class|=blade]:nth-child(12) {
  left: 679px;
  -webkit-animation-delay: 0.3583945338s;
          animation-delay: 0.3583945338s;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}

[class|=blade]:nth-child(13) {
  left: 712px;
  -webkit-animation-delay: 0.7921826718s;
          animation-delay: 0.7921826718s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

[class|=blade]:nth-child(14) {
  left: 849px;
  -webkit-animation-delay: 0.095873261s;
          animation-delay: 0.095873261s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

[class|=blade]:nth-child(15) {
  left: 596px;
  -webkit-animation-delay: 0.719938872s;
          animation-delay: 0.719938872s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

[class|=blade]:nth-child(16) {
  left: 242px;
  -webkit-animation-delay: 0.9943387373s;
          animation-delay: 0.9943387373s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

[class|=blade]:nth-child(17) {
  left: 11px;
  -webkit-animation-delay: 0.4211336319s;
          animation-delay: 0.4211336319s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

[class|=blade]:nth-child(18) {
  left: 683px;
  -webkit-animation-delay: 0.3801116575s;
          animation-delay: 0.3801116575s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

[class|=blade]:nth-child(19) {
  left: 63px;
  -webkit-animation-delay: 0.7677779771s;
          animation-delay: 0.7677779771s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

[class|=blade]:nth-child(20) {
  left: 91px;
  -webkit-animation-delay: 0.8404638618s;
          animation-delay: 0.8404638618s;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}

[class|=blade]:nth-child(21) {
  left: 781px;
  -webkit-animation-delay: 0.3161250332s;
          animation-delay: 0.3161250332s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

[class|=blade]:nth-child(22) {
  left: 960px;
  -webkit-animation-delay: 0.2256370446s;
          animation-delay: 0.2256370446s;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}

[class|=blade]:nth-child(23) {
  left: 401px;
  -webkit-animation-delay: 0.0908990835s;
          animation-delay: 0.0908990835s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

[class|=blade]:nth-child(24) {
  left: 113px;
  -webkit-animation-delay: 0.2953681059s;
          animation-delay: 0.2953681059s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

[class|=blade]:nth-child(25) {
  left: 828px;
  -webkit-animation-delay: 0.5723014947s;
          animation-delay: 0.5723014947s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

[class|=blade]:nth-child(26) {
  left: 344px;
  -webkit-animation-delay: 0.657006069s;
          animation-delay: 0.657006069s;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}

[class|=blade]:nth-child(27) {
  left: 784px;
  -webkit-animation-delay: 0.4709698431s;
          animation-delay: 0.4709698431s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

[class|=blade]:nth-child(28) {
  left: 190px;
  -webkit-animation-delay: 0.3259182547s;
          animation-delay: 0.3259182547s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

[class|=blade]:nth-child(29) {
  left: 34px;
  -webkit-animation-delay: 0.1885487523s;
          animation-delay: 0.1885487523s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

[class|=blade]:nth-child(30) {
  left: 981px;
  -webkit-animation-delay: 0.9169615957s;
          animation-delay: 0.9169615957s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

[class|=blade]:nth-child(31) {
  left: 887px;
  -webkit-animation-delay: 0.9149604917s;
          animation-delay: 0.9149604917s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

[class|=blade]:nth-child(32) {
  left: 733px;
  -webkit-animation-delay: 0.5466143136s;
          animation-delay: 0.5466143136s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

[class|=blade]:nth-child(33) {
  left: 421px;
  -webkit-animation-delay: 0.6766395342s;
          animation-delay: 0.6766395342s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

[class|=blade]:nth-child(34) {
  left: 118px;
  -webkit-animation-delay: 0.0583680177s;
         .........完整代码请登录后点击上方下载按钮下载查看