css+svg实现孔雀开屏动画效果代码-html代码-BFW代码库

css+svg实现孔雀开屏动画效果代码

代码语言：html

所属分类：动画

代码描述：css+svg实现孔雀开屏动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  background: #000;
}

.p_feathers use {
  transform-origin: 150px 140px;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  z-index: -1;
}
.p_feathers use:nth-child(2) {
  animation-name: anim-feather-2;
}

.p_feathers use:nth-child(3) {
  animation-name: anim-feather-3;
}

.p_feathers use:nth-child(4) {
  animation-name: anim-feather-4;
}

.p_feathers use:nth-child(5) {
  animation-name: anim-feather-5;
}

.p_feathers use:nth-child(6) {
  animation-name: anim-feather-6;
}

.p_feathers use:nth-child(7) {
  animation-name: anim-feather-7;
}

.p_feathers use:nth-child(8) {
  animation-name: anim-feather-8;
}

@keyframes anim-feather-2 {
  from {
    transform: rotate(23deg);
  }
  to {
    transform: rotate(20deg);
  }
}

@keyframes anim-feather-3 {
  from {
    transform: rotate(46deg);
  }
  to {
    transform: rotate(40deg);
  }
}

@keyframes anim-feather-4 {
  from {
    transform: rotate(69deg);
  }
  to {
    transform: rotate(60deg);
  }
}

@keyframes anim-feather-5 {
  from {
    transform: rotate(-23deg);
  }
  to {
    transform: rotate(-20deg);
  }
}

@keyframes anim-feather-6 {
  from {
    transform: rotate(-46deg);
  }
  to {
    transform: rotate(-40deg);
  }
}

@keyframes anim-feather-7 {
  from {
    transform: rotate(-69deg);
  }
  to {
    transform: rotate(-60deg);
  }
}
@keyframes anim-feather-8 {
  from {
    transform: rotate(-92deg);
  }
  to {
    transform: rotate(-80deg);
  }
}
</style>


</head>

<body >
  <svg class="pe.........完整代码请登录后点击上方下载按钮下载查看