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

代码语言：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%;
}

.eye-2 {
  top: 16.75%;
  left: 43%;
  transform: rotate(3deg) scale(1.1);
}

.mouth {
  width: 12%;
  height: 4%;
  background: var(--line);
  border-radius: 1vmin 2vmin 50% 60%;
  top: 28%;
  left: 35%;
  background-image:
    linear-gradient(var(--line) 20%, transparent 0),
    repeating-linear-gradient(to right, transparent 0 5%, white 0 25%),
    radial-gradient(at 70% 200%, var(--red) 50%, transparent 0);
  background-size: 87% 50%, 87% 50%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 65% 0%;
  box-shadow: inset -0.5vmin 0, inset 0 0 0 0.25vmin;
}

.ear-2 {
  width: 8%;
  height: 10%;
  background: var(--skin);
  border-radius: 50%;
  box-shadow: 
    0.6vmin -0.125vmin 0 0.4vmin,
    0.125vmin -0.75vmin 0 -0.25vmin;
  top: 18.5%;
  left: 52.5%;
  transform: rotate(15deg);
}

.ear-2::before {
  content: "";
  display: block;
  position: absolute;
  width: 2vmin;
  height: 2vmin;
  border: 0.35vmin solid;
  border-right: 0.75vmin solid;
  border-left:0.125vmin solid transparent;
  border-radius: 50%;
  box-shadow:
    inset -0.75vmin 0 #f001,
    0.5vmin -0.75vmin 0 0.25vmin #f001;
  top: 50%;
  left: 25%;
}

.ear-2::after {
  content: "";
  display: block;
  position: absolute;
  width: 2vmin;
  height: 2vmin;
  border: 0.35vmin solid gold;
  border-bottom: 0.75vmin solid gold;
  border-top:0.125vmin solid transparent;
  border-radius: 50%;
  top: 90%;
  left: 50%;
  filter: drop-shadow(0.45vmin 0.25vmin) drop-shadow(-0.25vmin 0.25vmin) drop-shadow(0 -0.25vmin);
}

.body {
  width: 20%;
  height: 32%;
  background-image: 
    radial-gradient(at 105% 0%, var(--skin) 24%, transparent 0),
    radial-gradient(at 105% 0%, var(--line) 26%, transparent 0),
    repeating-radial-gradient(circle at 50% -20%, white 0 15%, #369 15.5% 30%, white 30.5%);
  border-radius: 100% / 120% 120% 10% 15%;
  box-shadow: 0 0 0 0.5vmin, -0.25vmin 0.25vmin 0 0.25vmin, inset -0.75vmin -0.5vmin #0001;
  top: 34%;
  left: 34%;
  transform: rotate(3deg);
}

.tie {
  width: 10vmin;
  height: 5vmin;
  background: var(--red);
  border: 0.5vmin solid;
  border-radius: 0 100%;
  box-shadow: 0.25vmin 0.125vmin;
  transform: rotate(50deg);
  top: 30%;
  left: 52%;
}

.tie::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--red);
  border: 0.5vmin solid;
  border-radius: 0 100%;
  box-shadow: 0.25vmin 0.125vmin;
  transform-origin: top left;
  transform: rotate(-24deg);
}

.neck {
  width: 6%;
  height: 8%;
  border-radius: 50%;
  background: var(--skin);
  border: 0.5vmin solid;
  box-shadow: inset 1vmin 7vmin 0 -4vmin #f001, 0 0.25vmin;
  transform: rotate(30deg);
  top: 32%;
  left: 41%;
}

.arm-1 {
  width: 3vmin;
  height: 25vmin;
  background: var(--skin);
  border-left: 0.6vmin solid;
  border-right: 0.6vmin solid;
  transform-origin: 50% 0%;
  transform: rotate(-45deg) skewY(-50deg);
  top: 38.8%;
  left:48%;
  background-image: linear-gradient(88deg, #f001 40%, transparent 0)
}

.hand {
  width: 8.5vmin;
  height: 7.5vmin;
  border-radius: 50%;
  background: var(--skin);
  box-shadow: 0.25vmin 0 0 0.5vmin;
}

.hand-1 {
  top: 58%;
  left: 68%;
}

.hand-2 {
  top: 10%;
  left: 17%;
  background-image:
    radial-gradient(circle at 70% -50%, lightgray 80%, var(--line) 0 83%, transparent 0)
}

.hand-2::before {
  content: "";
  display: block;
  position: absolute;
  width: 20%;
  height: 20%;
  background: var(--skin);
  top: 90%;
  left: 22%;
  border-radius: 50%;
}

.blade {
  height: 47%;
  width: 5%;
  border-radius: 0% 90% 20% 0%;
  background: lightgray;
  border: 0.5vmin solid;
  box-shadow: 0.25vmin 0;
  transform-origin: 50% 100%;
  transform: rotate(30deg);
  background-image: linear-gradient(to right, #fff4 35%, transparent 0);
  top: 10%;
  left: 7.........完整代码请登录后点击上方下载按钮下载查看