css布局绘制著名油画女孩回眸效果代码-html代码-BFW代码库

代码语言：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: flex;
  align-items: 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);
  transform: rotate(30deg);
  right: 30%;
  top: 25%;
  z-index: 24;
  filter: blur(calc(20 * var(--unit)));
}
.canvas .earring {
  filter: var(--blur);
  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 {
  filter: var(--blur);
  width: 35%;
  height: 30%;
  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: 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 {
  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%;
  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%);
  transform: rotate(-20deg);
  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%;
  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);
  filter: blur(calc(5 * var(--unit)));
  top: 39%;
  left: -6%;
  border-radius: 100%/100%;
  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;
  transform: rotate(45deg);
  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 {
  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%;
  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%;
  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%;
  transform: rotate(10deg);
}
.canvas .yellow-drape {
  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%;
  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: "";
  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%;
  transform: rotate(-10deg);
}
.canvas .yellow-drape::after {
  content: "";
  filter: blur(calc(10 * var(--unit)));
  position: absolute;
  background: #2e260d;
  width: 10%;
  height: 50%;
  z-index: -10;
  bottom: 60%;
  left: 30%;
  transform: rotate(-5deg);
  box-shadow: calc(-4 * var(--unit)) calc(150 * var(--unit)) calc(1 * var(--unit)) #2e260d;
}
.canvas .yellow-drape-back {
  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%;
  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;
  transform: rotate(-10deg);
}
.canvas .neck {
  background: linear-gradient(70deg, var(--mp) 10%, #835f51 30%, #52392f 50%, #1f1512 100%);
  filter: blur(calc(2 * var(--unit)));
  width: 20%;
  height: 20%;
  z-index: 30;
  left: 48%;
  top: 50%;
  z-index: -1;
  transform: rotate(-28deg);
}
.canvas .side-blur {
  background: var(--db);
  filter: blur(calc(20 * var(--unit)));
  width: 9%;
  height: 13%;
  left: 55%;
  top: 40%;
  z-index: 20;
  border-radius: 20%;
  transform: rotate(20deg);
}
.canvas .blob:nth-child(2) {
  background: var(--lp);
  filter: blur(calc(15 * var(--unit)));
  width: 9%;
  height: 11%;
  transform: rotate(20deg);
  left: 42%;
  top: 40%;
  z-index: 2;
  border-radius: 20%;
}
.canvas .blob:nth-child(3) {
  background: var(--h);
  filter: blur(calc(10 * var(--unit)));
  width: 10%;
  height: 6%;
  transform: rotate(20deg);
  left: 35%;
  top: 30%;
  z-index: 2;
  border-radius: 50%;
}
.canvas .blob:nth-child(4) {
  background: linear-gradient(90deg, #1f2c3f 20%, black);
  filter: blur(calc(10 * var(.........完整代码请登录后点击上方下载按钮下载查看