css布局实现火隐忍者李洛克效果代码
代码语言: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: 5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0