单个div+css实现日系卡通娃娃效果代码-html代码-BFW代码库

单个div+css实现日系卡通娃娃效果代码

代码语言：html

代码描述：单个div+css实现日系卡通娃娃效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    html {
  height: 100%;

   overflow:hiddden;
}

body {
  margin: 0;
  background: lightcoral;
  overflow-x:hiddden;
  height: 100%;
  background: radial-gradient(ellipse, #f08080 0%, #e83c3c 100%);
}

#kokeshi {
animation: bounce 3s infinite;
  width: 20vw;
  height: 26vw;
  background: darkcyan;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  position: relative;
  margin: auto;
  margin-top: 50%;
  box-shadow: inset 0 -20vw 2vw 0 rgba(255, 255, 255, 0.2), inset 0 -2vw 0 0 rgba(0, 0, 0, 0.2), inset 5vw -13.33333vw 0 0 #006c6c, inset 6.66667vw -13.33333vw 0 0 #e52525, inset -5vw -13.33333vw 0 0 #007c7c, inset -6.66667vw -13.33333vw 0 0 #c01717;
}

#kokeshi:after {
  content: '';
  position: absolute;
  border-radius: 50%;
  top: -3.38983vw;
  left: 4vw;
  width: 4vw;
  height: 2vw;
  background: beige;
  -webkit-backface-visibility: hidden;
  z-index: 999;
  box-shadow: 9.09091vw 2.85714vw 2vw 0 rgba(220, 20, 60, 0.2), -1vw 2.85714vw 2vw 0 rgba(220, 20, 60, 0.2), 8.69565vw 0 0 0 beige, -0.4vw -0.66667vw 0 0 black, 9.09091vw -0.66667vw 0 0 black, 9.09091vw -1.66667vw 1.33333vw 0.4vw .........完整代码请登录后点击上方下载按钮下载查看