纯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.........完整代码请登录后点击上方下载按钮下载查看