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