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