css实现一个鹦鹉钉在电线上旋转动画效果代码-html代码-BFW代码库

css实现一个鹦鹉钉在电线上旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现一个鹦鹉钉在电线上旋转动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  background: #033F63;
}

.box {
  position: absolute;
  transform-origin: bottom right;
  width: 100px;
  height: 100px;
  right: 50%;
  top: 30%;
  animation: spin 1.5s infinite;
  animation-timing-function: cubic-bezier(0.5, 0.1, 0.1, 1);
}

.feet {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #758ECD;
  border-radius: 50%;
  bottom: -12px;
  right: -20px;
}

.branch {
  position: absolute;
  width: 60%;
  height: 60%;
  background: #DDC8C4;
  border-radius: 50%;
  bottom: 3px;
  left: 1px;
}

.body {
  position: absolute;
  width: 75px;
  height: 150px;
  background: #F13030;
  border-radius: 0 150px 150px 0;
  transform: rotate(45deg);
  bottom: -25px;
  right: -25px;
}

.hair {
  position: absolute;
  clip-path: polygon(100% 0, 0 49%, 100% 49%);
  width: 30px;
  height: 50px;
  background: #F13030;
  top: -48px;
  right: -20px;
  transform: rotate(10deg);
}

.head {
  position: absolute;
  width: 80px;
  height: 70px;
  background: #F13030;
  border-radius: 50%;
  overflow: hidden;
  top: -50px;
  right: -84px;
  animation: tilt 1.5s infinite;
}

.beak {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 60%;
  background: #EFF9F0;
  overflow: hidden;
  border-left: solid 2px black;
}

.lower-beak {
  position: absolute;
  width: 80%;
  height: 30%;
  background: black;
  transform: rotate(30deg);
  bottom: -5px;
  left: -12px;
}

.patch {
  position: absolute;
  width: 85%;
  height: 82%;
  background: white;
  border-radius: 50%;
  left: 18%;
  bottom: 0;
}

.eye {
  position: absolute;
  background: black;
  width: 10px;
  height: 15px;
  border-radius: 50%;
  left: 27%;
  top: 12%;
}

.wing {
  position: absolute;
  width: 60px;
  height: 130px;
  background: #5998C5;
  border-radius: 0 13.........完整代码请登录后点击上方下载按钮下载查看