css布局实现火隐忍者李洛克效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现火隐忍者李洛克效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">


  
  
<style>
*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
  --page-bg: #F3E8F5;
  --size: 90;
  --skin: #FABC9A;
  --forehead: rgb(255, 145, 111);
  --outfit: #80BFA1;
  --outfit-shade: rgb(47, 116, 82);
  --trim: #FF7853;
  --trim-dark: rgb(221, 41, 17);
  --shoe: #0C0D58;
  --pouch: rgb(8, 51, 30);
}

body {
  margin: 0 0 3rem;
  overflow: auto;
  padding: 0;
  min-height: 100vh;
  line-height: 1.6;
  background-color: var(--page-bg);
}

img {
/*   opacity: 0.6; */
/*   display: none; */
}

.rock-lee {
/*   background: hsla(0, 100%, 50%, 0.1); */
}

/* Responsively size the img height and center it on the page, use flexbox or position: fixed with transform */
img,
.rock-lee {
  width: calc(var(--size) * 1.4 * 1vmin);
  height: calc(var(--size) * 1vmin);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.head {
/*   background-color: hsla(150, 100%, 50%, 0.2); */
  height: calc(var(--size) / 1.05 * 1vmin);
  width: 35%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.head__block {
/*   opacity: .5; */
  overflow: hidden;
  position: absolute;
  background: #111;
  height: 23%;
  width: calc(var(--size) / 5.5 * 1vmin);
  top: 2.5%;
  left: 26.5%;
  border-radius: 50%;
}

.head__block--stripe {
  position: absolute;
  background: linear-gradient(to right, #eee 24%, #111 24% 29%, #eee 29% 50%, #000 50% 58%, #eee 58% 71%, #000 71% 78%, #eee 78%);
  height: 12.5%;
  width: 100%;
  top: 24%;
}

.head__block--face {
  position: absolute;
  z-index: 999;
  overflow: hidden;
  background: var(--skin);
  width: calc(var(--size) / 6.5 * 1vmin);
  height: 16.5%;
  border-radius: 50% 50% 0 0 / 70% 70% 0 0;
  transform: rotate(180deg);
  top: 9.7%;
  left: 29.5%;
  clip-path: inset(0 0 25% 0);
}

.head__block.eye {
  --s: 1.7;
  position: absolute;
  width: calc(var(--s) * 1vmin);
  height: calc(var(--s) * 1vmin);
  border-radius: 50%;
}

.head__block.eye.left {
  top: 43.5%;
  left: 68%;
  z-index: 3;
}

.head__block.eye.right {
  top: 43.5%;
  left: 23%;
  z-index: 3;
}

.eyebrow {
  --w: 3.7;
  position: absolute;
  width: calc(var(--w) * 1vmin);
  height: 11%;
  background-color: #111;
  border-radius: 0;
  z-index: 5;
}

.eyebrow.left {
  top: 50%;
  left: 62%;
}

.eyebrow.right {
  top: 50%;
  left: 16%;
}

.head__block.nose {
  width: 1.1%;
  background: #000;
  position: absolute;
  height: 12%;
  top: 44%;
  left: 53.5%;
  border-radius: 0;
  
}

.head__block.nose.bar {
  width: 1%;
  background: #000;
  position: absolute;
  height: 8%;
  transform: rotate(90deg);
  top: 34%;
  left: 52%;
  border-radius: 0;
}

.head__block.mouth {
  width: 1%;
  background: #000;
  position: absolute;
  height: 20%;
  transform: rotate(90deg);
  top: 10%;
  left: 52%;
  border-radius: 0;
}

.head__block.forehead {
  border-radius: 0;
  position: absolute;
  background: var(--forehead);
  background-image: radial-gradient(#000 15%, var(--forehead) 25%);
  background-size: 5px 5px;
  background-position: 0 0;
  top: 65.5%;
  height: 10%;
  left: -5%;
}

.torso__block {
  position: absolute;
  width: calc(var(--size) / 4.75 * 1vmin);
  height: 25%;
  top: 18.5%;
  left: 41%;
  background: var(--outfit);
/*   opacity: .5; */
  border-radius: 50% 50% 0 0 / 95% 99% 0 0;
  clip-path: inset(21% 15% 0 9%);
  z-index: -1;
}

.torso__block--shoulder {
  width: calc(var(--size) / 5 * 1vmin);
  height: 5.6%;
  background: var(--outfit);
  position: absolute;
  top: 31.2%;
  left: 46.45%;
  border-radius: 20% 40% 0 0 / 99% 20% 0 0;
  transform: rotate(99deg);
  clip-path: inset(0 2% 0 0%);
}

.belt {
  position: absolute;
  width: 11.7%;
  height: 3%;
  background: var(--trim);
  z-index: 999;
  overflow: hidden;
}

.top {
  top: 43.3%;
  width: 11.75%;
  left: 42.425%;
  border-radius: 60% 50% 0 0 / 10% 30% 0 0;
  clip-path: inset(0 3% 0 0)
}

.bottom {
  transform: rotate(180deg);
  top: 45.75%;
  left: 42.4%;
  border-radius: 60% 60% 0 0 / 50% 40% 0 0;
  width: 11.6%;
  clip-path: inset(0 0 0 2%);
}

.belt__badge {
  background: #ddd;
  width: 5.25%;
  height: 3%;
  position: absolute;
  top: 44.5%;
  left: 46.8%;
  z-index: 1000;
  overflow: hidden;
  border-radius: 3px;
}

.badge__detail {
  --w: .65;
  --h: .2;
  width: calc(var(--w) * 1vmin);
  height: calc(var(--w) * 1vmin);
/*   width: 3px;
  height: 3px; */
  background: #000;
  position: absolute;
  border-radius: 50%;
}

.badge__detail.one {
  top: 10%;
  left: 6%;
}

.badge__detail.two {
  top: 60%;
  left: 6%;
}
.badge__detail.three {
  top: 10%;
  left: 86.3%;
}
.badge__detail.four {
  top: 60%;
  left: 86.3%;
}

.badge__detail.five {
  top: 45%;
  width: 35%;
  height: 2%;
  left: -85%;
  border-radius: 0;
}

.shuriken {
  position: absolute;
  top: 46%;
  left: 39.75%;
  width: 5.2%;
  height: 6%;
  background: radial-gradient(#000 25%, #D61E01 25%);
  background-size: 4px 4px;
  transform: rotate(3deg);
  background-position: 0 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  z-index: -1;
}

.shin__left {
  position: absolute;
  top: 65%;
  left: 40.25%;
  height: 22%;
  width: 6.4%;
/*   opacity: .5; */
  background: linear-gradient(to bottom, var(--outfit) 10%, #fff 10% 23%, var(--outfit) 23% 39.5%, var(--trim) 39.5%);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.shin__left--detail {
  position: absolute;
  background: #000;
  top: 40%;
  height: 60%;
  width: 2%;
}

.one {
  left: 17%;
}

.two {
  left: 47%;
}

.three {
  left: 79%;
}

.foot {
  position: absolute;
  top: 87%;
  left: 40.1%;
  height: 9%;
  width: 6.2%;
  background: linear-gradient(to bottom, var(--shoe) 40%, #000 40% 42%, var(--shoe) 42% 65%, var(--skin) 65%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.toe {
  width: 2%;
  height: 15%;
  background: #000;
  position: absolute;
}

.toe--one {
  top: 80%;
  left: 16%;
}

.toe--two {
  top: 80%;
  left: 30%;
}

.toe--three {
  top: 80%;
  left: 45%;
}

.toe--four {
  top: 78%;
  left: 60%;
  height: 17%;
}

.toe--five {
  top: 75%;
  left: 75%;
  height: 20%;
}

.sole {
  position: absolute;
  top: 93.9%;
  left: 40.5%;
  background: linear-gradient(transparent 50%, var(--shoe) 50%);
  height: 3%;
  width: 5.5%;
  border-radius: 20px;
}

.left__thigh {
  position: absolute;
  width: 6.5%;
  height: 21%;
  background: var(--outfit);
  top: 45%;
  left: 41%;
/*   opacity: .5; */
  clip-path: polygon(15% 0%, 0% 100%, 100% 100%);
  transform: rotate(7deg);
  border-bottom-left-radius: 3px;
}

.left__thigh.pad {
  width: 20%;
  top: 48.5%;
  left: 38%;
  background: linear-gradient(var(--outfit) 68%, transparent 50%);
  transform: rotate(76deg);
}

.left__thigh.sliver {
  width: 70%;
  height: 22%;
  top: 65%;
  left: 0.5%;
  background: linear-gradient(var(--outfit) 15%, transparent 15%);
  transform: rotate(119deg);
}

.right__thigh {
  position: absolute;
  width: 30%;
  height: 30%;
  background: linear-gradient(var(--outfit) 40%, transparent 40%);
  top: 45%;
  left: 44.5%;
  clip-path: polygon(20% 0%, 0% 100%, 50% 50%);
  transform: rotate(5deg);
}

.right__thigh.detail {
  position: absolute;
  width: 12%;
  height: 21.5%;
  width: 12.5%;
  top: 50%;
  left: 44.1%;
/*   opacity: .6; */
  clip-path: none;
  transform: rotate(52deg);
}

.right__thigh.detail.knee {
  width: 8.5%;
  height: 15%;
  top: 56.75%;
  left: 52%;
/*   opacity: .7; */
  transform: rotate(115deg);
  border-radius: 50% 50% 0 0 / 45% 0% 0 0;
}

.right__thigh.detail.knee.two {
  width: 2.2%;
  height: 12.5%;
  top: 55%;
  left: 52.6%;
/*   opacity: .7; */
  background: radial-gradient(#000 25%, var(--outfit-shade) 25%);
  background-position: 0 0;
  background-size: 4px 4px;
  transform: rotate(144deg);
  border-radius: 50% 50% 0 0 / 25% 0% 0 0;
}

.right__thigh.detail.knee.two--inner {
  width: 2%;
  height: 7%;
  top: 63.5%;
  left: 55%;
  background: radial-gradient(#000 25%, var(--outfit-shade) 25%);
  z-index: -1;
  background-position: 0 0;
  background-size: 4px 4px;
  transform: rotate(18deg);
  border-radius: 50% 50% 0 0 / 45% 60% 0 0;
}

.leg-detail {
  position: absolute;
  top: 55.5%;
  left: 49.7%;
  background: #000;
  width: 3.9%;
  height: .2%;
  transform: rotate(140deg);
}

.leg-detail.r {
  top: 66%;
  left: 54.8%;
  width: 2.5%;
  background: #000;
  z-index: 999;
  transform: rotate(170deg);
}

.patchwork {
  background: var(--outfit);
  position: absolute;
  top: 64.4%;
  left: 56.4%;
  width: 2.1%;
  height: 2%;
  border-radius: 50% 50% 0 0 / 45% 45% 0 0;
  transform: rotate(85deg);
}

.leg-detail.l {
  top: 68.7%;
  left: 40%;
  width: 6.75%;
  background: #000;
  z-index: 999;
  transform: rotate(164deg);
}

.leg-detail.l-two {
  top: 56.5%;
  left: 40.9%;
  width: 2.5%;
  background: #000;
  z-index: 999;
  transform: rotate(140deg);
}

.left-leg-band {
  background: #fff;
  width: 6.5%;
  position: absolute;
  height: 3.5%;
  z-index: 999;
  transform: rotate(10deg);
  top: 61%;
  left: 40.55%;
  border-radius: 50% 50% 0 0 / 10% 15% 0 0;
}

.detail-leg {
  position: absolute;
  background: #000;
  height: 5%;
  width: 35%;
  clip-path: 0;
  top: 35%;
}

.detail-leg--two {
  position: absolute;
  background: #000;
  height: 5%;
  width: 35%;
  clip-path: 0;
  top: 60%;
  right: 0%;
}

.torso__detail {
  position: absolute;
  background: #000;
  --h: .2;
  height: calc(var(--h) * 1vmin);
  width: 2.5%;
  clip-path: 0;
  top: 39.9%;
  right: 45.25%;
}

.torso__detail--two {
  position: absolute;
  background: #000;
  --h: .15;
  height: calc(var(--h) * 1vmin);
  width: 2.5%;
  clip-path: 0;
  top: 38%;
  right: 44.9%;
  transform: rotate(25deg);
}

.pouch {
  position: absolute;
  background: var(--pouch);
  background: rgb(31, 70, 51);
  background: radial-gradient(#000 25%, rgb(36, 82, 59) 25%);
  background-position: 0 0;
  background-size: 4px 4px;
  width: 2.4%;
  height: 4.5%;
  top: 58.5%;
  left: 38.6%;
  z-index: -1;
  border-radius: 3px;
  transform: rotate(9deg);
}

.pouch--finish {
  position: absolute;
  background: rgb(31, 70, 51);
  background: radial-gradient(#000 25%, rgb(31,70,51) 25%);
  background:  rgb(36, 82, 59);
  background: radial-gradient(#000 25%, rgb(36, 82, 59) 25%);
  background-position: 0 0;
  background-size: 4px 4px;
  width: 2.4%;
  height: 4.5%;
  top: 63%;
  left: 38.6%;
  z-index: -1;
  border-radius: 3px;
  transform: rotate(9deg);
}

.hand__behind {
  position: absolute;
  width: 4.9%;
  height: 15.9%;
  top: 22.5%;
  left: 37.5%;
  background: var(--skin);
  background: rgb(231, 165, 129);
  background: rgb(241, 156, 135);
  background: linear-gradient(to bottom, var(--skin) 38%, #eee 38%);
  transform: rotate(0deg);
/*   opacity: .6; */
  z-index: -1;
  clip-path: inset(10% 0 5% 0);
}

.hand__behind--finger {
  position: absolute;
  height: 2%;
  width: 1.5%;
  opacity: 1;
  background: rgb(241, 156, 135);
  background: var(--skin);
  border-radius: 50% 50% 0 0 / 75% 75% 0 0;
  
}

.a {
  top: 22.5%;
  left: 37.5%;
}

.b {
  top: 21.75%;
  left: 39%;
  height: 2.8%;
  width: 1.5%;
}

.c {
  top: 22.5%;
  left: 40.5%;
}

.d {
  top: 23%;
  left: 41.8%;
  height: 2%;
}

.e {
  top: 25.5%;
  left: 41%;
  height: 1.1%;
  width: 3%;
  transform: rotate(-70deg);
  border-radius: 50% 50% 0 0 / 45% 45% 0 0;
  z-index: -1;
}


.f {
  top: 29.3%;
  left: 36.5%;
  height: 3%;
  width: 1.5%;
  transform: rotate(25deg);
  z-index: -1;
}

.ld {
  --h: .1;
  position: absolute;
  background: #000;
  top: 55%;
  left: 0%;
  height: .2%;
  height: calc(var(--h) * 1vmin);
  width: 100%;
}

.ld--two {
  top: 68%;
  left: 0%;
}

.ld--three {
  top: 79%;
  left: 0%;
}

.ld--four {
  top: 90%;
  left: 0%;
}

.ld--five,
.ld--six,
.ld--seven {
  transform: rotate(90deg);
  width: 115%;
}

.ld--five {
  top: 20%;
  left: -23.75%;
}

.ld--six {
  top: 20%;
  left: 3%;
}

.ld--seven {
  top: 20%;
  left: 30%;
}

.hand__top {
  position: absolute;
  top: 37.5%;
  left: 37.3%;
  background: ;
  background: radial-gradient(#000 25%, #ddd 25%);
  background-position: 0 0;
  background-size: 5px 5px;
/*   opacity: .5; */
  width: 5%;
  height: 3.5%;
  border-radius: 50% 50% 0 0 / 5% 5% 0 0;
}

.hand__top.wrist {
  background: var(--outfit);
  background: rgb(36, 82, 59);
  background: radial-gradien.........完整代码请登录后点击上方下载按钮下载查看