纯css布局实现一个带口罩的人物图像效果-html代码-BFW代码库

代码语言：html

代码描述：纯css布局实现一个带口罩的人物图像效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(38, 115, 171, 0.5);
}

.container {
  width: 500px;
  height: 500px;
  margin: auto;
}

.circle {
  transform: scale(1.8);
  width: 180px;
  height: 180px;
  position: relative;
  background-color: #ffd500;
  margin-top: 28vh;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  z-index: 2;
  overflow: hidden;
  box-shadow: 20px 20px 50px 10px grey;
}

.hair, .face, .curl, .glasses {
  position: relative;
  margin: auto;
}

.hair {
  left: -58px;
  top: -84px;
  width: 300px;
  height: 300px;
}
.hair .back-hair {
  position: absolute;
  top: 103px;
  left: 98px;
  margin: auto;
  width: 98px;
  height: 123px;
  background-color: black;
  z-index: 0;
  border-radius: 50% 50% 0% 0%;
}
.hair .curl {
  z-index: 2;
  background-color: black;
  width: 29px;
  height: 30px;
  border-radius: 50%;
  display: inline-grid;
}
.hair .right-curls .curl:nth-child(1) {
  left: 168px;
  top: 102px;
  margin: -4px;
  transform: translate3d(-20px, 1px, 1px);
}
.hair .right-curls .curl:nth-child(2) {
  left: 168px;
  top: 102px;
  margin: -4px;
  transform: translate3d(-40px, 4px, 2px);
}
.hair .right-curls .curl:nth-child(3) {
  left: 168px;
  top: 102px;
  margin: -4px;
  transform: translate3d(-60px, 9px, 3px);
}
.hair .right-curls .curl:nth-child(4) {
  left: 168px;
  top: 102px;
  margin: -4px;
  transform: translate3d(-80px, 16px, 4px);
}
.hair .right-curls .curl:nth-child(5) {
  left: 168px;
  top: 102px;
  margin: -4px;
  transform: translate3d(-100px, 25px, 5px);
}
.hair .right-curls .curl:nth-child(6) {
  left: 168px;
  top: 102px;
  margin: -4px;
  transform: translate3d(-120px, 36px, 6px);
}
.hair .right-curls .curl:nth-child(7) {
  left: 168px;
  top: 102px;
  margin: -4px;
  transform: translate3d(-140px, 49px, 7px);
}
.hair .right-curls .curl:nth-child(8) {
  left: 168px;
  top: 102px;
  margin: -4px;
  transform: translate3d(-160px, 64px, 8px);
}
.hair .right-curls .curl:nth-child(9) {
  left: 168px;
  top: 102px;
  margin: -4px;
  transform: translate3d(-180px, 81px, 9px);
}
.hair .right-curls .curl:nth-child(10) {
  left: 168px;
  top: 102px;
  margin: -4px;
  transform: translate3d(-200px, 100px, 10px);
}
.hair .left-curls {
  position: relative;
  top: -24px;
  left: 26px;
  transform: scaleX(-1);
}
.hair .left-curls .curl:nth-child(1) {
  left: 200px;
  top: 100px;
  margin: -4px;
  transform: translate3d(-20px, 1px, 1px);
}
.hair .left-curls .curl:nth-child(2) {
  left: 200px;
  top: 100px;
  margin: -4px;
  transform: translate3d(-40px, 4px, 2px);
}
.hair .left-curls .curl:nth-child(3) {
  left: 200px;
  top: 100px;
  margin: -4px;
  transform: translate3d(-60px, 9px, 3px);
}
.hair .left-curls .curl:nth-child(4) {
  left: 200px;
  top: 100px;
  margin: -4px;
  transform: translate3d(-80px, 16px, 4px);
}
.hair .left-curls .curl:nth-child(5) {
  left: 200px;
  top: 100px;
  margin: -4px;
  transform: translate3d(-100px, 25px, 5px);
}
.hair .left-curls .curl:nth-child(6) {
  left: 200px;
  top: 100px;
  margin: -4px;
  transform: translate3d(-120px, 36px, 6px);
}
.hair .left-curls .curl:nth-child(7) {
  left: 200px;
  top: 100px;
  margin: -4px;
  transform: translate3d(-140px, 49px, 7px);
}
.hair .left-curls .curl:nth-child(8) {
  left: 200px;
  top: 100px;
  margin: -4px;
  transform: translate3d(-160px, 64px, 8px);
}
.hair .left-curls .curl:nth-child(9) {
  left: 200px;
  top: 100px;
  margin: -4px;
  transform: translate3d(-180px, 81px, 9px);
}
.hair .left-curls .curl:nth-child(10) {
  left: 200px;
  top: 100px;
  margin: -4px;
  transform: translate3d(-200px, 100px, 10px);
}

.face {
  z-index: 1;
  left: -5px;
  top: -270px;
  width: 69px;
  height: 100px;
  background-color: #d1b899;
  border-radius: 30% 30% 50% 50%;
  box-shadow: 1.5px 1.5px grey;
}

.left-spec, .right-spec {
  position: relative;
  width: 22px;
  height: 20px;
  border: solid 2px rgba(38, 115, 171, 0.6);
  border-radius: 47%;
  top: 24px;
  left: 8px;
}

.right-spec {
  left: 42px;
  top: -2px;
}

.middle-glasses {
  position: relative;
  width: 8px;
  height: 2px;
  background-color: rgba(38, 115, 171, 0.6);
  left: 34px;
  top: 10px;
}

.eye {
  position: relative;
  width: 12px;
  height: 12px;
  background-color: white;
  border-radius: 100% 0;
  transform: rotate(45deg);
  top: 3.5px;
  left: 5px;
  border: solid 0.5px rgba(0, 0, 0, 0.6);
}
.eye .inner-eye {
  transform: rotate(-45deg);
  position: relative;
  width: 6.5px;
  height: 6px;
  background-color: black;
  border-radius: 50%;
  top: 3px;
  left: 2.5px;
  z-index: -1;
}

.eyebrow-left, .eyebrow-right {
  position: absolute;
  width: 18px;
  height: 8px;
  border-radius: 50%;
  border-top: solid 3px black;
  top: 21px;
  left: 12px;
  transition: .2s;
}

.eyebrow-right {
  left: 48px;
}

.mask {
  position: relative;
}
.mask .strap-right, .mask .strap-left {
  top: -18px;
  left: 4px;
  position: relative;
  width: 2px;
  height: 24px;
  background-color: #2673ab;
  transform: rotate(150deg);
}
.mask .strap-left {
  transform: rotate(-150deg);
  left: 65px;
  top: -40px;
}
.mask .face-cover {
  position: relative;
  width: 56px;
  height: 46px;
  background-color: #2673ab;
  top: -53px;
  left: 8px;
  border-radius: 30% 30% 60% 60%;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent 50%);
}
.mask .face-cover .nose {
  position: relative;
  width: 0px;
  height: 0px;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 5px solid #2673ab;
  border-radius: 50%;
  to.........完整代码请登录后点击上方下载按钮下载查看