div+css实现独角兽马拉屎动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现独角兽马拉屎动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        * {
      box-sizing: border-box;
    }
    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #71C0BA;
      overflow: hidden;
    }
    
    .unicorn {
      position: relative;
      transform: translatex(-80px);
    }
    
    .unicorn-body {
      background: #F2FBF8;
      width: 160px;
      height: 100px;
      transform: rotate(-25deg);
      border-radius: 50% 40% 0 0/100% 30% 0 0;
    }
    .unicorn-body:before {
      content: "";
      background: #66AEA8;
      width: 420px;
      height: 10px;
      position: absolute;
      bottom: -175px;
      border-radius: 50%/100%;
      transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1);
      -webkit-animation: shadow 5s ease-out infinite;
              animation: shadow 5s ease-out infinite;
    }
    
    @-webkit-keyframes shadow {
      5% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1.2);
      }
      10% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1.1);
      }
      15% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1.2);
      }
      20% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1);
      }
      25% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1.1);
      }
      30% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1);
      }
      35% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1);
      }
    }
    
    @keyframes shadow {
      5% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1.2);
      }
      10% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1.1);
      }
      15% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1.2);
      }
      20% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1);
      }
      25% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1.1);
      }
      30% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1);
      }
      35% {
        transform: translatex(-130px) translatey(-30px) rotate(25deg) scalex(1);
      }
    }
    .unicorn-butt {
      background: #F2FBF8;
      top: 15px;
      left: -5px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      position: absolute;
      -webkit-animation: butt 5s ease-out infinite;
              animation: butt 5s ease-out infinite;
    }
    
    @-webkit-keyframes butt {
      5% {
        top: -14px;
        left: -14px;
      }
      50% {
        top: 15px;
        left: -5px;
      }
    }
    
    @keyframes butt {
      5% {
        top: -14px;
        left: -14px;
      }
      50% {
        top: 15px;
        left: -5px;
      }
    }
    .unicorn-tail {
      background: #F23666;
      background-image: repeating-linear-gradient(13deg, transparent, transparent 35px, #389AC8 35px, #389AC8 70px, #F2D80E 25px, #F2D80E);
      height: 115px;
      width: 54px;
      border-radius: 0% 100% 0% 100%/0% 90% 10% 100%;
      position: absolute;
      top: 55px;
      left: -2px;
      z-index: -1;
      transform: rotate(20deg);
      transform-origin: top center;
      -webkit-animation: tail 5s ease-out infinite;
              animation: tail 5s ease-out infinite;
    }
    
    @-webkit-keyframes tail {
      0% {
        transform: rotate(20deg);
      }
      5% {
        transform: rotate(120deg) skew(20deg);
      }
      10% {
        transform: rotate(50deg) skew(5deg);
      }
      15% {
        transform: rotate(80deg) skew(10deg);
      }
      20% {
        transform: rotate(40deg) skew(2deg);
      }
      25% {
        transform: rotate(60deg) skew(5deg);
      }
      30% {
        transform: rotate(30deg) skew(2deg);
      }
      35% {
        transform: rotate(20deg) skew(0deg);
      }
    }
    
    @keyframes tail {
      0% {
        transform: rotate(20deg);
      }
      5% {
        transform: rotate(120deg) skew(20deg);
      }
      10% {
        transform: rotate(50deg) skew(5deg);
      }
      15% {
        transform: rotate(80deg) skew(10deg);
      }
      20% {
        transform: rotate(40deg) skew(2deg);
      }
      25% {
        transform: rotate(60deg) skew(5deg);
      }
      30% {
        transform: rotate(30deg) skew(2deg);
      }
      35% {
        transform: rotate(20deg) skew(0deg);
      }
    }
    .unicorn-feet {
      background: #F2FBF8;
      width: 40px;
      height: 120px;
      position: absolute;
    }
    .unicorn-feet.unicorn-feet-1 {
      left: 25px;
      box-shadow: inset 0 -8px #F23666, inset -16px 0 #DBF0EC, inset 0 -10px #F23666;
    }
    .unicorn-feet.unicorn-feet-2 {
      right: -5px;
      box-shadow: inset 0 -8px #F23666, inset 16px 0 #DBF0EC, inset 0 -10px #F23666;
    }
    .unicorn-feet:before {
      content: "";
      border-top: 110px solid #F2FBF8;
      border-left: 50px solid transparent;
      border-right: 40px solid transparent;
      position: absolute;
      top: -40px;
      left: -30px;
    }
    
    .unicorn-upper {
      transform: translate(3px, -102px) rotate(5deg);
      transform-origin: 132px;
      -webkit-animation: bend-over 2.5s ease-out infinite alternate;
              animation: bend-over 2.5s ease-out infinite alternate;
    }
    
    @-webkit-keyframes bend-over {
      100% {
        transform: translate(24px, -88px) rotate(74deg);
      }
    }
    
    @keyframes bend-over {
      100% {
        transform: translate(24px, -88px) rotate(74deg);
      }
    }
    .unicorn-neck-1 {
      background: #F2FBF8;
      width: 190px;
      height: 75px;
      border-radius: 50% 0 50% 0/100% 0 100% 0;
      transform: rotate(-52deg);
      position: absolute;
      top: -40px;
      left: 60px;
    }
    
    .unicorn-neck-2 {
      background: linear-gradient(255deg, #F2FBF8, #F2FBF8 80%, rgba(0, 0, 0, 0) 80%);
      width: 255px;
      height: 80px;
      border-radius: 50%/50%;
      transform: rotate(-72deg);
      position: absolute;
      top: -40px;
      left: 45px;
    }
    
    .unicorn-head-1 {
      background: #F2FBF8;
      width: 70px;
      height: 115px;
      border-radius: 50%;
      transform: rotate(22deg);
      position: absolute;
      top: -160px;
      left: 165px;
      z-index: 1;
    }
    
    .unicorn-head-2 {
      background: #F2FBF8;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      po.........完整代码请登录后点击上方下载按钮下载查看