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

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

代码语言：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) transl.........完整代码请登录后点击上方下载按钮下载查看