单个div+css实现一个饥饿的河马效果代码-html代码-BFW代码库

单个div+css实现一个饥饿的河马效果代码

代码语言：html

代码描述：单个div+css实现一个饥饿的河马效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        body {
          min-height: 320px;
          height: 100vh;
          position: relative;
          background-color: #dc143c;
          text-align: center;
        }
        div {
          position: absolute;
          left: 50%;
          top: 50%;
        }
        div:before,
        div:after {
          display: block;
          content: '';
          position: absolute;
        }
        #hungry {
          width: 20em;
          height: 20em;
          margin-left: -10em;
          margin-top: -10em;
          background-repeat: no-repeat;
          background-image: linear-gradient(white, white), linear-gradient(white, white), radial-gradient(ellipse, #b22222 35%, #ffb6c1 36%, #ffb6c1 50%, rgba(255,182,193,0) 51%), radial-gradient(circle, black 50%, rgba(0,0,0,0) 51%), radial-gradient(circle, black 50%, rgba(0,0,0,0) 51%), radial-gradient(ellipse at 50% 100%, #ffb6c1 50%, rgba(255,182,193,0) 50.1%), radial-gradient(ellipse at 50% 100%, #ff798d 50%, rgba(255,182,193,0) 50.1%), radial-gradient(ellipse at 50% 100%, #ff798d 50%, rgba(255,182,193,0) 50.1%), radial-gradient(circle, #ff798d 50%, rgba(255,182,193,0) 50.1%), radial-gradient(circle, #ff798d 50%, rgba(255,182,193,0) 50.1%);
          background-size: 1em 1em, 1em 1em, 4.5em 5em, 0.6em 0.6em, 0.6em 0.6em, 10em 9em, 17em 16em, 9em 6em, 2.5em 2.5em, 2.5em 2.5em;
          background-position: 42% 50%, 58% 50%, 50% 50%, 47% 27%, 52.5% 27%, left 50% bottom 1em, left 50% bottom 1em, 50% 10%, 40% 10%, 60% 10%;
        }
        #hungry:before {
          width: 8em;
          height: 4em;
          left: 50%;
          margin-left: -4em;
          top: 30%;
          background-color: #ffb6c1;
          background-repeat: no-repeat;
          background-image: radial-gradient(circle, #ff798d 50%, rgba(255,182,193,0) 51%), radial-gradient(circle, #ff798d 50%, rgba(255,182,193,0) 51%), radial-gradient(circle, #ff798d 50%, rgba(255,182,193,0) 51%), radial-gradient(circle, #ff798d 50%, rgba(255,182,193,0) 51%), radial-gradient(circle, #ff798d 50%, rgba(255,182,193,.........完整代码请登录后点击上方下载按钮下载查看