纯css布局绘制一个小女孩效果
代码语言：html
所属分类：布局界面
代码描述：纯css布局绘制一个小女孩效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
}
:root {
--size: 100;
--unit: calc((var(--size) / 1095) * 1vmin);
--shadow: rgb(150, 107, 95);
--db: hsl(15, 34%, 23%);
--mb: hsl(22, 22%, 33%);
--lb: hsl(25, 22%, 47%);
--dp: hsl(24, 26%, 61%);
--mp: hsl(25, 58%, 78%);
--lp: hsl(17, 81%, 85%);
--h: hsl(22, 64%, 85%);
--rosy: rgb(247, 197, 205);
--b: #25547f;
--blur: blur(calc(1 * var(--unit)));
}
body {
min-height: 100vh;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
background: #0e0e0e;
}
.canvas {
height: calc(1095 * var(--unit));
width: calc(935 * var(--unit));
position: fixed;
top: 0%;
z-index: 1;
overflow: hidden;
}
.canvas * {
position: absolute;
}
.canvas .side-shadow {
width: 25%;
height: 40%;
background: rgba(0, 0, 0, 0.212);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
right: 30%;
top: 25%;
z-index: 24;
-webkit-filter: blur(calc(20 * var(--unit)));
filter: blur(calc(20 * var(--unit)));
}
.canvas .earring {
-webkit-filter: var(--blur);
filter: var(--blur);
background: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.548))), radial-gradient(circle at 50% 0%, rgba(0, 0, 0, 0.164) 70%, rgba(255, 255, 255, 0.212) 90%), radial-gradient(circle at 10% 40%, #cac1c1 5%, rgba(0, 0, 0, 0.521) 30%, rgba(41, 41, 41, 0.822) 60%), -webkit-gradient(linear, left bottom, left top, color-stop(10%, white), color-stop(40%, #bbb3b3), to(#4d4d4d));
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.548) 100%), radial-gradient(circle at 50% 0%, rgba(0, 0, 0, 0.164) 70%, rgba(255, 255, 255, 0.212) 90%), radial-gradient(circle at 10% 40%, #cac1c1 5%, rgba(0, 0, 0, 0.521) 30%, rgba(41, 41, 41, 0.822) 60%), linear-gradient(0deg, white 10%, #bbb3b3 40%, #4d4d4d 100%);
border-radius: 50%;
width: 5%;
height: 4.5%;
bottom: 43.5%;
right: 34.5%;
}
.canvas .collar {
-webkit-filter: var(--blur);
filter: var(--blur);
width: 35%;
height: 30%;
background: -webkit-gradient(linear, left top, right top, color-stop(80%, #dad7c1), to(#636259));
background: linear-gradient(90deg, #dad7c1 80%, #636259 100%);
box-shadow: inset 0 calc(2 * var(--unit)) calc(10 * var(--unit)) #636259;
left: 41%;
bottom: 13.5%;
border-radius: 83% 5% 0% 0%;
z-index: -1;
}
.canvas .collar::before {
content: "";
position: absolute;
width: 108%;
height: 100%;
border-radius: 90% 0% 0% 0%;
background: #464129;
background: -webkit-gradient(linear, left top, right top, from(#443f25), color-stop(20%, #91743e), color-stop(30%, #91743e), color-stop(50%, #463720), color-stop(80%, #161007), to(#0a0703));
background: linear-gradient(90deg, #443f25 0%, #91743e 20%, #91743e 30%, #463720 50%, #161007 80%, #0a0703 100%);
top: 10%;
left: -8%;
box-shadow: inset calc(40 * var(--unit)) calc(-30 * var(--unit)) calc(20 * var(--unit)) rgba(51, 42, 20, 0.637);
}
.canvas .jacket {
-webkit-filter: blur(calc(2 * var(--unit)));
filter: blur(calc(2 * var(--unit)));
width: 50%;
height: 40%;
background: linear-gradient(62deg, #91743e 40%, #463720 55%, #1a140b 70%, #161007 80%, #0a0703 100%);
left: 35%;
bottom: -15%;
border-radius: 100% 100% 0% 0% / 100% 100% 0% 0%;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
z-index: 20;
box-shadow: inset calc(10 * var(--unit)) calc(-9 * var(--unit)) calc(15 * var(--unit)) #3b3420, inset calc(25 * var(--unit)) calc(-20 * var(--unit)) calc(18 * var(--unit)) calc(5 * var(--unit)) rgba(68, 57, 28, 0.637);
}
.canvas .jacket::after {
content: "";
position: absolute;
width: 15%;
height: 60%;
bottom: 0%;
left: 20%;
border-radius: 40% / 50%;
background: linear-gradient(260deg, #68512f 0%, #463920 50%);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
-webkit-filter: blur(calc(8 * var(--unit)));
filter: blur(calc(8 * var(--unit)));
box-shadow: calc(-30 * var(--unit)) calc(40 * var(--unit)) calc(20 * var(--unit)) rgba(73, 58, 35, 0.89), calc(80 * var(--unit)) calc(-50 * var(--unit)) calc(25 * var(--unit)) calc(5 * var(--unit)) #4d3d26, calc(150 * var(--unit)) calc(-10 * var(--unit)) calc(30 * var(--unit)) calc(15 * var(--unit)) #1b160f, calc(200 * var(--unit)) calc(30 * var(--unit)) calc(20 * var(--unit)) calc(35 * var(--unit)) #1d1710;
}
.canvas .band {
width: 42%;
height: 30%;
-webkit-filter: var(--blur);
filter: var(--blur);
background: linear-gradient(110deg, rgba(188, 208, 231, 0.5) 20%, rgba(86, 117, 155, 0.5) 40%, rgba(30, 58, 85, 0.9) 53%, #0b1b2b 70%, black 100%), radial-gradient(ellipse at 0% 100%, #6085a8 50%, #0f151b 80%);
top: 18%;
left: 33%;
border-radius: 70% 100% 50% 0% / 80% 100% 50% 0%;
overflow: hidden;
}
.canvas .band::after {
content: "";
position: absolute;
width: 50%;
height: 40%;
background: rgba(30, 58, 85, 0.9);
-webkit-filter: blur(calc(5 * var(--unit)));
filter: blur(calc(5 * var(--unit)));
top: 39%;
left: -6%;
border-radius: 100% / 100%;
-webkit-transform: rotate(32deg);
transform: rotate(32deg);
}
.canvas .top-band {
width: 27%;
height: 5%;
background: linear-gradient(68deg, #6382a8 0%, #152f47 50%, #0b1b2b 80%, black 100%);
border-radius: 50% 30% 10% 0%;
z-index: 20;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-filter: blur(calc(2 * var(--unit)));
filter: blur(calc(2 * var(--unit)));
top: 36%;
right: 27%;
box-shadow: calc(1 * var(--unit)) calc(2 * var(--unit)) calc(1 * var(--unit)) var(--db), 0 calc(3 * var(--unit)) calc(1 * var(--unit)) #352121;
}
.canvas .top-yellow-band {
-webkit-filter: blur(calc(2.5 * var(--unit)));
filter: blur(calc(2.5 * var(--unit)));
width: 26%;
height: 20%;
top: 11%;
left: 51%;
background: #74694a;
border-radius: 70% 100% 20% 0% / 70% 100% 20% 0%;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
z-index: -20;
overflow: hidden;
}
.canvas .top-yellow-band::before {
content: "";
position: absolute;
width: 80%;
height: 80%;
background: linear-gradient(80deg, #29251a 30%, #d4be82 80%, #29251a 90%, black 100%);
border-radius: inherit;
right: 0%;
bottom: 15%;
box-shadow: inset 0 calc(3 * var(--unit)) calc(1 * var(--unit)) #4d472f;
}
.canvas .top-yellow-band::after {
content: "";
position: absolute;
width: 80%;
height: 80%;
background: linear-gradient(80deg, #29251a 60%, #e4cd8d 70%, #29251a 90%, black 100%);
border-radius: inherit;
right: 0%;
bottom: -10%;
box-shadow: inset 0 calc(3 * var(--unit)) calc(1 * var(--unit)) #4d472f;
}
.canvas .yellow-band {
width: 30%;
height: 18%;
-webkit-filter: var(--blur);
filter: var(--blur);
background: #e4cd8d;
background: linear-gradient(110deg, rgba(228, 205, 141, 0.8) 20%, rgba(129, 116, 79, 0.8) 65%, rgba(41, 37, 26, 0.5) 80%, black 100%), radial-gradient(circle at bottom center, rgba(253, 233, 176, 0.8), rgba(185, 171, 131, 0.8) 60%, rgba(34, 30, 20, 0.8) 100%);
z-index: -1;
left: 45%;
top: 15%;
border-radius: 80% 100% 20% 0% / 80% 100% 20% 0%;
box-shadow: inset calc(-3 * var(--unit)) calc(3 * var(--unit)) calc(5 * var(--unit)) rgba(41, 37, 26, 0.5);
overflow: hidden;
}
.canvas .yellow-band .shadow {
width: 105%;
height: 80%;
border-radius: inherit;
background: linear-gradient(110deg, rgba(228, 205, 141, 0.8) 20%, rgba(129, 116, 79, 0.8) 65%, rgba(41, 37, 26, 0.5) 80%);
box-shadow: inset calc(-15 * var(--unit)) calc(5 * var(--unit)) calc(5 * var(--unit)) #353021, calc(80 * var(--unit)) 0 calc(10 * var(--unit)) #332e20, calc(60 * var(--unit)) calc(-10 * var(--unit)) calc(10 * var(--unit)) #5a5139;
top: 15%;
left: -5%;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.canvas .yellow-drape {
-webkit-filter: var(--blur);
filter: var(--blur);
width: 10%;
height: 61%;
background: linear-gradient(85deg, #81744f 0%, #e4cd8d 40%, #413a29 60%);
right: 15%;
top: 20%;
z-index: 30;
border-radius: 10% 100% 20% 20% / 5% 100% 15% 15%;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
box-shadow: inset calc(4 * var(--unit)) calc(2 * var(--unit)) calc(10 * var(--unit)) #272318, inset calc(-4 * var(--unit)) calc(2 * var(--unit)) calc(10 * var(--unit)) #272318, calc(-4 * var(--unit)) calc(-4 * var(--unit)) calc(10 * var(--unit)) #272318, calc(6 * var(--unit)) calc(0 * var(--unit)) calc(10 * var(--unit)) rgba(39, 34, 21, 0.877);
overflow: hidden;
}
.canvas .yellow-drape::before {
content: "";
-webkit-filter: var(--blur);
filter: var(--blur);
position: absolute;
background: linear-gradient(100deg, rgba(14, 18, 22, 0.856) 0%, rgba(73, 93, 131, 0.8) 40%, rgba(41, 52, 65, 0.5) 80%);
width: 110%;
height: 18%;
z-index: -10;
bottom: -2%;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.canvas .yellow-drape::after {
content: "";
-webkit-filter: blur(calc(10 * var(--unit)));
filter: blur(calc(10 * var(--unit)));
position: absolute;
background: #2e260d;
width: 10%;
height: 50%;
z-index: -10;
bottom: 60%;
left: 30%;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
box-shadow: calc(-4 * var(--unit)) calc(150 * var(--unit)) calc(1 * var(--unit)) #2e260d;
}
.canvas .yellow-drape-back {
-webkit-filter: var(--blur);
filter: var(--blur);
width: 10%;
height: 55%;
z-index: -10;
background: linear-gradient(85deg, #81744f 0%, #495d83 40%, #1f262e 60%, black 100%);
right: 10%;
top: 20%;
border-radius: 10% 100% 20% 20% / 5% 100% 15% 15%;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
box-shadow: inset calc(2 * var(--unit)) calc(2 * var(--unit)) calc(10 * var(--unit)) #272318, inset calc(-2 * var(--unit)) calc(2 * var(--unit)) calc(10 * var(--unit)) #16140d, calc(-4 * var(--unit)) calc(-4 * var(--unit)) calc(10 * var(--unit)) #272318;
overflow: hidden;
}
.canvas .yellow-drape-back::before {
content: "";
position: absolute;
background: linear-gradient(100deg, rgba(139, 170, 206, 0.8) 0%, rgba(73, 93, 131, 0.8) 40%, rgba(41, 52, 65, 0.5) 80%);
width: 110%;
height: 15%;
z-index: -10;
bottom: 0;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.canvas .neck {
background: linear-gradient(70deg, var(--mp) 10%, #835f51 30%, #52392f 50%, #1f1512 100%);
-webkit-filter: blur(calc(2 * var(--unit)));
filter: blur(calc(2 * var(--unit)));
width: 20%;
height: 20%;
z-index: 30;
left: 48%;
top: 50%;
z-index: -1;
-webkit-transform: rotate(-28deg);
transform: rotate(-28deg);
}
.canvas .side-blur {
background: var(--db);
-webkit-filter: blur(calc(20 * var(--unit)));
filter: blur(calc(20 * var(--unit)));
width: 9%;
height: 13%;
left: 55%;
top: 40%;
z-index: 20;
border-radius: 20%;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.canvas .blob:nth-child(2) {
background: var(--lp);
-webkit-filter: blur(calc(15 * var(--unit)));
filter: blur(calc(15 * var(--unit)));
width: 9%;
height: 11%;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
left: 42%;
top: 40%;
z-index: 2;
border-radius: 20%;
}
.canvas .blob:nth-child(3) {
background: var(--h);
-webkit-filter: blur(calc(10 * var(--unit)));
filter: blur(calc(10 * var(--unit)));
width: 10%;
height: 6%;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
left: 35%;
top: 30%;
z-index: 2;
border-radius: 50%;
}
.canvas .blob:nth-child(4) {
background: -webkit-gradient(linear, left top, right top, color-stop(20%, #1f2c3f), to(black));
background: linear-gradient(90deg, #1f2c3f 20%, black);
-webkit-filter: blur(calc(10 * var(--unit)));
filter: blur(calc(10 * var(--unit)));
width: 22%;
height: 18.5%;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
left: 56%;
top: 26%;
z-index: 21;
border-radius: 0% 50% 0% 0%;
}
.canvas .blob:nth-child(4)::after {
content: "";
position: absolute;
width: 40%;
-webkit-filter: blur(calc(2 * var(--unit)));
filter: blur(calc(2 * var(--unit)));
height: 35%;
border-radius: 100% 0% 0% 0% / 100% 0% 0% 0%;
background: -webkit-gradient(linear, left top, right top, from(rgba(30, 58, 85, 0.9)), to(#1f2c3f));
background: linear-gradient(90deg, rgba(30, 58, 85, 0.9), #1f2c3f);
bottom: 3%;
left: -40%;
}
.canvas .ear {
width: 9%;
height: 5.7%;
-webkit-filter: var(--blur);
filter: var(--blur);
-webkit-transform: rotate(-43deg);
transform: rotate(-43deg);
background: linear-gradient(170deg, #966d60 50%, #422f29);
right: 32%;
top: 44%;
z-index: 15;
border-radius: 32%;
box-shadow: 0 calc(2 * var(--unit)) #574239;
}
.canvas .ear::before {
content: "";
position: absolute;
background: #52382d;
-webkit-filter: blur(calc(2 * var(--unit)));
filter: blur(calc(2 * var(--unit)));
width: 60%;
height: 30%;
left: 20%;
top: 20%;
border-radius: 50%;
}
.canvas .ear::after {
content: "";
position: absolute;
background: #966d60;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
width: 80%;
height: 40%;
left: 0%;
top: 0%;
border-radius: 50%;
}
.canvas .face {
width: 35%;
height: 32%;
border-radius: 30%;
left: 30%;
top: 29%;
overflow: hidden;
}
.canvas .face .temple {
background: -webkit-gradient(linear, left top, right top, from(var(--mp)), color-stop(20%, #b99084), color-stop(30%, #966d60));
background: linear-gradient(90deg, var(--mp) 0%, #b99084 20%, #966d60 30%);
-webkit-filter: blur(calc(4 * var(--unit)));
filter: blur(calc(4 * var(--unit)));
width: 25%;
height: 20%;
z-index: 3;
right: 23%;
top: 20%;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.canvas .face .chin-blur {
width: 9%;
height: 15%;
background: rgba(163, 121, 105, 0.836);
border-radius: 30%;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
left: 32%;
bottom: 5%;
z-index: 10;
-webkit-filter: blur(calc(4 * var(--unit)));
filter: blur(calc(4 * var(--unit)));
}
.canvas .face .chin-blur::after {
content: "";
position: absolute;
background: radial-gradient(circle at -10% 0%, var(--mp) 0%, rgba(163, 121, 105, 0.836) 50%);
width: 150%;
height: 50%;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
bottom: 0%;
left: -70%;
}
.canvas .face .f1 {
background: var(--lp);
background: linear-gradient(10deg, var(--lp) 0%, var(--mp) 100%);
width: 60%;
height: 36%;
left: 5%;
top: 5%;
border-radius: 70% 80% 100% 50% / 100% 90% 100% 100%;
-webkit-transform: rotate(28deg);
transform: rotate(28deg);
-webkit-filter: var(--blur);
filter: var(--blur);
box-shadow: inset 0 calc(2 * var(--unit)) calc(8 * var(--unit)) var(--db), inset calc(1 * var(--unit)) calc(1 * var(--unit)) calc(1 * var(--unit)) var(--db);
}
.canvas .face .f2 {
background: var(--mp);
-webkit-filter: var(--blur);
filter: var(--blur);
z-index: -1;
width: 85%;
height: 58%;
left: 5%;
top: 14%;
border-radius: 30% 100% 100% 50% / 20% 100% 100% 100%;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.canvas .face .left-cheek {
background: var(--lp);
background: -webkit-gradient(linear, left bottom, left top, from(var(--lp)), color-stop(15%, var(--h)), color-stop(70%, var(--mp)));
background: linear-gradient(0deg, var(--lp) 0%, var(--h) 15%, var(--mp) 70%);
-webkit-filter: var(--blur);
filter: var(--blur);
width: 80%;
height: 40%;
left: -13%;
top: 36%;
border-radius: 100% 0% 80% 100%;
-webkit-transform: rotate(75deg);
transform: rotate(75deg);
}
.canvas .face .f4 {
background: var(--mp);
background: radial-gradient(circle at 0% 50%, var(--lp) 35%, #9e6857 100%);
width: 39%;
height: 30%;
left: 13%;
top: 68%;
border-radius: 30% 0% 50% 45% / 30% 0% 50% 58%;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
-webkit-filter: var(--blur);
filter: var(--blur);
}
.canvas .face .right-cheek {
background: linear-gradient(75deg, var(--mp) 10%, var(--shadow) 50%);
width: 45%;
height: 50%;
left: 47%;
top: 30%;
border-radius: 0% 50%;
-webkit-transform: rotate(42deg);
transform: rotate(42deg);
-webkit-filter: var(--blur);
filter: var(--blur);
}
.canvas .face .right-cheek::after {
content: "";
position: absolute;
width: 150%;
height: 50%;
background: #70473a;
background: linear-gradient(115deg, #bd9182 0%, var(--shadow) 40%);
bottom: -10%;
-webkit-transform: rotate(-80deg);
transform: rotate(-80deg);
border-radius: 80% 0% 40% 60% / 50%;
}
.canvas .face .right-cheek .blob:nth-child(1) {
background: linear-gradient(75deg, var(--mp) 10%, var(--shadow) 50%);
-webkit-filter: blur(calc(5 * var(--unit)));
filter: blur(calc(5 * var(--unit)));
width: 89%;
height: 156%;
-webkit-transfo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0