div+css绘制一个马吃草效果代码-html代码-BFW代码库

div+css绘制一个马吃草效果代码

代码语言：html

代码描述：div+css绘制一个马吃草效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        html,
    body {
      width: 100%;
      height: 100%;
      background: #70dece;
      overflow: hidden;
    }
    html *,
    body * {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      box-sizing: border-box;
    }
    html *:before, html *:after,
    body *:before,
    body *:after {
      content: "";
      position: absolute;
    }
    
    .horn {
      z-index: 2;
      width: 0;
      height: 0;
      top: -58vmin;
      left: -30vmin;
      border-bottom: 10vmin solid #ff80b7;
      border-left: 0.8vmin solid transparent;
      border-right: 0.8vmin solid transparent;
      transform: rotate(-45deg);
    }
    
    .ear {
      width: 2vmin;
      height: 4vmin;
      background: #ffffff;
      top: -58vmin;
      left: -22vmin;
      border-radius: 90% 0;
      transform: rotate(-60deg);
    }
    .ear::before {
      width: 2vmin;
      height: 4vmin;
      background: #ffffff;
      top: 1.8vmin;
      left: 1.3vmin;
      border-radius: 90% 0;
      transform: rotate(60deg);
    }
    
    .head {
      width: 11.6vmin;
      height: 4.3vmin;
      background: #ffffff;
      top: -44.3vmin;
      left: -23.8vmin;
      transform: rotate(-45deg);
    }
    .head::before {
      width: 12vmin;
      height: 3.5vmin;
      background: #ffffff;
      top: 2.7vmin;
      transform: rotate(25deg);
    }
    .head::after {
      width: 6vmin;
      height: 10vmin;
      background: #ffffff;
      top: -0.2vmin;
      left: 7.5vmin;
      border-radius: 0.4vmin 4.2vmin 3vmin 1vmin;
    }
    
    .eye {
      z-index: 2;
      width: 3vmin;
      height: 1.6vmin;
      background: transparent;
      top: -46.6vmin;
      left: -19vmin;
      border: 0.4vmin solid #010101;
      border-top: 0;
      border-radius: 0 0 10vmin 10vmin;
    }
    
    .mouth {
      z-index: 2;
      width: 4vmin;
      height: 4.35vmin;
      background: #ffffff;
      top: -34.8vmin;
      left: -31vmin;
    }
    
    .eat-grass-1 {
      z-index: 1;
      width: 4vmin;
      height: 2vmin;
      background: #109d8b;
      top: -28.5vmin;
      left: -32.9vmin;
      border-radius: 0 3vmin 0 0;
      transform: rotate(90deg);
    }
    .eat-grass-1::after {
      width: 4vmin;
      height: 2vmin;
      background: #70dece;
      top: 0.65vmin;
      left: 0.15vmin;
      border-radius: 0 3vmin 0 0;
    }
    .eat-grass-2 {
      z-index: 1;
      width: 2.3vmin;
      height: 1.5vmin;
      background: #109d8b;
      top: -28.8vmin;
      left: -29.6vmin;
      border-radius: 0 0 3vmin 0;
      transform: rotate(90deg);
    }
    .eat-grass-2::after {
      width: 2vmin;
      height: 1.5vmin;
      background: #70dece;
      top: -0.5vmin;
      left: 0.3vmin;
      border-radius: 0 0 3vmin 0;
    }
    
    .body-1 {
      width: 24vmin;
      height: 26vmin;
      background: #ffffff;
      top: -10.8vmin;
      left: -1.9vmin;
      border-radius: 0 0 10vmin 10vmin;
      transform: rotate(15deg);
    }
    .body-1::before {
      width: 6vmin;
      height: 12vmin;
      background: #ffffff;
      top: -5vmin;
      left: 2.7vmin;
      border-radius: 50%;
      transform: rotate(-24deg);
    }
    .body-1::after {
      width: 15vmin;
      height: 4vmin;
      background: #70dece;
      top: 5vmin;
      left: 10.6vmin;
      border-radius: 1vmin 0 0 4vmin;
      transform: rotate(-25deg);
    }
    .body-2 {
      z-index: 2;
      width: 16vmin;
      height: 9vmin;
      background: #70dece;
      top: -29vmin;
      left: 12vmin;
    }
    .body-2::before {
      width: 6vmin;
      height: 15vmin;
      background: #ffffff;
      top: -4.5vmin;
      left: -4.7vmin;
      border-radius: 0 10vmin 0 0;
      transform: rotate(4deg);
    }
    .body-2::after {
      width: 8.1vmin;
      height: 10vmin;
      background: #ffffff;
      top: 11.7vmin;
      left: 9.6vmin;
      transform: rotate(46deg);
    }
    .body-3 {
      z-index: 2;
      width: 8vmin;
      height: 8vmin;
      background: #ffffff;
      top: -0.8vmin;
      left: 25.79vmin;
      transform: rotate(20deg);
    }
    .body-3::before {
      width: 7vmin;
      height: 10vmin;
      background: #ffffff;
      top: 9.5vmin;
      left: -14vmin;
      border-radius: 0 0 10vmin 0;
      transform: rotate(7.........完整代码请登录后点击上方下载按钮下载查看