css布局一个海盗效果代码-html代码-BFW代码库

css布局一个海盗效果代码

代码语言：html

代码描述：css布局一个海盗效果代码

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

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

<head>

  <meta charset="UTF-8">
  

<style>
html, body {
  overflow: hidden;  
}

#desc {
  position: absolute;
  left: -10000in;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cartoon {
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 4rem #beeeef)
}

.cartoon * {
  position: absolute;
  box-sizing: border-box;
}

:root {
  --skin: #fca;
  --line: #222;
  --red: #d00;
  color: --line;
}

.head-1 {
  width: 25%;
  height: 15%;
  border-radius: 35% 0 40% 70%;
  background: var(--skin);
  box-shadow: 
    -1vmin 0.1vmin 0 -0.25vmin, 
    0 0.7vmin 0 -0.2vmin,
    inset -1vmin -0.5vmin #f001;
  top: 20%;
  left: 30%;
  transform: rotate(-10deg);
}

.head-2 {
  width: 24%;
  height: 25%;
  background: var(--skin);
  border-radius: 45%;
  top: 10%;
  left: 32.5%;
  box-shadow: -0.25vmin -0.5vmin 0 0.25vmin, 0.25vmin 0, inset -0.25vmin 0, inset -2vmin 4vmin 0 -2.25vmin var(--red), inset -2vmin 4vmin 0 -1.85vmin, inset -3vmin 0 #f001;
}

.nose {
  width: 6%;
  height: 5%;
  border-radius: 50%;
  box-shadow: -1vmin -0.5vmin 0 -0.25vmin;
  transform: rotate(10deg);
  top: 23%;
  left: 38%;
  background: var(--skin);
}

.ear-1 {
  width: 6%;
  height: 8%;
  background: var(--skin);
  border-radius: 50%;
  box-shadow: -0.25vmin 0 0 0.25vmin;
  top: 18%;
  left: 30%;
}

.eye {
  width: 6%;
  height: 7%;
  background: white;
  border-radius: 100% / 100% 120% 40% 40%;
  box-shadow: 0.25vmin 0 0 0.25vmin, -0.125vmin -0.125vmin 0 0.25vmin;
  overflow: hidden;
}

.eye::before {
  content: "";
  display: block;
  position: absolute;
  width: 5vmin;
  height: 5vmin;
  background: var(--line);
  border-radius: 50%;
  top: 20%;
  left: 22%;
}

.eye-1 {
  top: 16.5%;
  left: 33.5%;
}.........完整代码请登录后点击上方下载按钮下载查看