单个div布局实现一个黑猫效果代码-html代码-BFW代码库

单个div布局实现一个黑猫效果代码

代码语言：html

代码描述：单个div布局实现一个黑猫效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
:root {
  --eyes-color: white;
  --head-color: #1B2129;
  --color1: #98c200;
  --color2: #4d0033;
  --color4: #162947;
}

body {
  height: 100vh;
  margin: 0;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 30vmin;
  height: 28vmin;
  border-radius: 40% 40% 50% 50% / 60% 60% 40% 40%;
  animation: eyes-animation 100ms infinite ease-in-out;
  animation-direction: alternate;
}

div {  
  background-image:
    /* left eye */
    radial-gradient(ellipse, var(--eyes-color) 60%, transparent 61%),
    radial-gradient(ellipse, var(--eyes-color) 60%, transparent 61%),
    radial-gradient(ellipse, var(--head-color) 60%, transparent 61%),
    radial-gradient(ellipse, var(--eyes-color) 60%, transparent 61%),
    radial-gradient(ellipse, black 60%, transparent 61%),
    /* right eye */
    radial-gradient(ellipse, var(--eyes-color) 60%, transparent 61%),
    radial-gradient(ellipse, var(--eyes-color) 60%, transparent 61%),
    radial-gradient(ellipse, var(--head-color) 60%, transparent 61%),
    radial-gradient(ellipse, var(--eyes-color) 60%, transparent 61%),
    radial-gradient(ellipse, black 60%, transparent 61%),
    /* mouth */
    radial-gradient(ellipse, var(--head-color) 60%, transparent 61%),
    radial-gradient(ellipse, #4D4355 60%, transparent 61%),
    radial-gradient(ellipse, var(--head-color) 60%, transparent 61%),
    radial-gradient(ellipse, #4D4355 60%, transparent 61%),
    /* nose */
    radial-gradient(ellipse, #4D4355 60%, transparent 61%),
    /* tongue */
    radial-gradient(ellipse, pink 60%, transparent 61%),
    /* cat head */
    radial-gradient(ellipse, #1B2129 49%, var(--head-color) 50%, var(--head-color) 51%);
  background-position: 
    /* left eye */
    32.5% 38%, 23.5% 50%, 22.5% 40%, 20% 40%, 18% 38%,
    /* right eye */
    81% 38%, 70.5% 50%, 77.5% 40%, 80% 40%, 82% 38%,
    /* mouth */
    34% 81%, 35% 83%, 67% 81%, 65% 83%,
    /* nose */
    50% 70%,
    /* tongue */
    50% 87%,
    /* cat head */
    50% 75%;
  background-size: 
    /* left eye */
    4vmin 4vmin, 3vmin 3vmin, 7vmin 7vmin, 9vmin 9vmin, 9.5vmin 9.5vmin,
    /* right eye */
    4vmin 4vmin, 3vmin 3vmin, 7vmin 7vmin, 9vmin 9vmin, 9.5vmin 9.5vmin,
    /* mouth */
    8vmin 6vmin, 8vmin 6vmin, 8vmin 6vmin, 8vmin 6vmin,
    /* nose */
    4vmin 4vmin,
    /* tongue */
    0vmin 0vmin,
    /* cat head */
    38vmin 33vmin;
  background-repeat: no-repeat;
}

div:hover {
  background-image:
    /* left eye */
    radial-gradient(ellipse, var(--eyes-color) 60%, transparent 61%),
    radial-gradient(ellipse, var(--eyes-color) 60%, transparent 61%),
    radial-gradient(ellipse, var(--head-color) 60%, transparent 61%),
    radial-gradient(ellipse, var(--eyes-color) 60%, transparent 61%),
    radial-gradient(ellipse, black 60%, transparent 61%),
    /* right eye */
    radial-gradient(.........完整代码请登录后点击上方下载按钮下载查看