div+css布局实现长耳环耳坠美女上半身图像效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css布局实现长耳环耳坠美女上半身图像效果代码现彩色棒冰加载动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
html,
body {
  width: 100%;
  height: 100%;
  background: #45426d;
  overflow: hidden;
}
html *,
body * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-sizing: border-box;
}
html *:before, html *:after,
body *:before,
body *:after {
  content: "";
  position: absolute;
}

.hair-1 {
  width: 20.9vmin;
  height: 15vmin;
  background: #21142e;
  top: -69vmin;
  left: 0.5vmin;
  transform: rotate(-1.5deg);
  border-radius: 50%;
}
.hair-1::before {
  width: 18vmin;
  height: 8vmin;
  background: #21142e;
  top: 5vmin;
  left: -6.8vmin;
  transform: rotate(-56.8deg);
  border-radius: 50%;
}
.hair-1::after {
  width: 17vmin;
  height: 8vmin;
  background: #21142e;
  top: 6.5vmin;
  left: 10.2vmin;
  transform: rotate(73deg);
  border-radius: 50%;
}
.hair-2 {
  width: 10vmin;
  height: 4vmin;
  background: #7c7eaf;
  top: -70.3vmin;
  border-radius: 50%;
}
.hair-2::before {
  width: 4vmin;
  height: 3vmin;
  background: #7c7eaf;
  top: 0.4vmin;
  left: 7.3vmin;
  transform: skewX(20deg) rotate(8deg);
  border-radius: 0 100% 0 0;
}
.hair-2::after {
  width: 4vmin;
  height: 3vmin;
  background: #7c7eaf;
  top: 0.6vmin;
  left: -1.55vmin;
  transform: skewX(-22deg) rotate(-13deg);
  border-radius: 100% 0 0 0;
}
.hair-3 {
  z-index: 2;
  width: 23vmin;
  height: 10vmin;
  background: #21142e;
  top: -59.5vmin;
  border-radius: 50%;
}
.hair-3::before {
  width: 15.7vmin;
  height: 34vmin;
  background: #21142e;
  top: 3vmin;
  left: 12.8vmin;
  border-radius: 50%;
}
.hair-3::after {
  width: 19vmin;
  height: 36vmin;
  background: #21142e;
  top: 2vmin;
  left: -5.9vmin;
  border-radius: 50%;
}
.hair-4 {
  z-index: 2;
  width: 15vmin;
  height: 10vmin;
  background: #21142e;
  top: -50vmin;
}
.hair-4::before {
  width: 1vmin;
  height: 6vmin;
  background: #21142e;
  top: 22vmin;
  left: 22.2vmin;
  transform: rotate(14deg);
  border-radius: 50%;
}
.hair-5 {
  width: 25vmin;
  height: 42vmin;
  background: #21142e;
  top: 54vmin;
  left: -27.2vmin;
  transform: rotate(41deg);
  border-radius: 50%;
}
.hair-5::before {
  width: 5vmin;
  height: 15vmin;
  background: #21142e;
  top: 4vmin;
  left: 0.8vmin;
  transform: rotate(2deg);
}
.hair-5::after {
  width: 10vmin;
  height: 10vmin;
  background: #21142e;
  left: -0.1vmin;
  transform: rotate(-12deg);
}
.hair-6 {
  width: 25vmin;
  height: 42vmin;
  background: #45426d;
  top: 54vmin;
  left: -25vmin;
  transform: rotate(41.4deg);
  border-radius: 50%;
}
.hair-6::before {
  width: 0.5vmin;
  height: 5.5vmin;
  background: #21142e;
  top: 23vmin;
  transform: rotate(-5deg);
}
.hair-6::after {
  width: 25vmin;
  height: 35vmin;
  background: #21142e;
  top: 5vmin;
  left: 0.2vmin;
  transform: rotate(-7.5deg) skewY(-3deg);
  border-radius: 50%;
}
.hair-7 {
  width: 10vmin;
  height: 25vmin;
  background: #21142e;
  top: 29vmin;
  left: -23vmin;
  transform: rotate(43deg);
}

.ear-right {
  width: 2.9vmin;
  height: 6vmin;
  background: #fff;
  top: -10.7vmin;
  left: 33vmin;
  transform: rotate(15deg);
  border-radius: 50%;
}
.ear-right::before {
  width: 2vmin;
  height: 6vmin;
  background: #fff;
  top: 4vmin;
  left: 0.7vmin;
  transform: rotate(2.5deg);
}

.ear-left {
  width: 2.9vmin;
  height: 6vmin;
  background: #fff;
  top: -10.7vmin;
  left: -33vmin;
  transform: rotate(-15deg);
  border-radius: 50%;
}
.ear-left::before {
  width: 2vmin;
  height: 6vmin;
  background: #fff;
  top: 3.9vmin;
  left: 0.2vmin;
  transform: rotate(-2.6deg);
}

.earring-right {
  z-index: 2;
  width: 4.1vmin;
  height: 4.1vmin;
  background: #a0aadd;
  top: 5.3vmin;
  left: 29.7vmin;
  border-radius: 50%;
}
.earring-right::before {
  width: 2.05vmin;
  height: 27.9vmin;
  background: #a0aadd;
  top: 5.85vmin;
  left: 1.05vmin;
}

.earring-left {
  z-index: 2;
  width: 4.1vmin;
  height: 4.1vmin;
  background: #a0aadd;
  top: 5.3vmin;
  left: -29.7vmin;
  border-radius: 50%;
}
.earring-left::before {
  width: 2.05vmin;
  height: 27.9vmin;
  background: #a0aadd;
  top: 5.85vmin;
  left: 1.05vmin;
}

.face-1 {
  z-index: 2;
  width: 10vmin;
  height: 10vmin;
  background: #fff;
  top: -48.2vmin;
}
.face-1::before {
  width: 10vmin;
  height: 10vmin;
  background: #21142e;
  top: -2vmin;
  left: 5.7vmin;
  transform: rotate(-11deg);
}
.face-1::after {
  width: 10vmin;
  height: 10vmin;
  background: #21142e;
  top: -2vmin;
  left: -5.7vmin;
  transform: rotate(11deg);
}
.face-2 {
  z-index: 2;
  width: 20vmin;
  height: 9.7vmin;
  background: #fff;
  top: -38.9vmin;
  transform: rotate(-1deg);
  border-radius: 50%;
}
.face-2::before {
  width: 10vmin;
  height: 20vmin;
  background: #fff;
  top: 1.9vmin;
  left: 15.65vmin;
  transform: rotate(3.2deg);
  border-radius: 0 100% 0 0;
}
.face-2::after {
  width: 10vmin;
  height: 20vmin;
  background: #fff;
  top: 1.8vmin;
  left: -5.9vmin;
  transform: rotate(-1deg) skewY(-1deg);
  border-radius: 100% 0 0 0;
}
.face-3 {
  z-index: 2;
  width: 23vmin;
  height: 25vmin;
  background: #fff;
  top: -10vmin;
}
.face-3::before {
  width: 5vmin;
  height: 1vmin;
  background: #fff;
  top: -4.95vmin;
  left: 17vmin;
  transform: rotate(30deg);
  border-radius: 50%;
}
.face-3::after {
  width: 5vmin;
  height: 1vmin;
  background: #fff;
  top: -4.95vmin;
  left: 1.35vmin;
  transform: rotate(-30deg);
  border-radius: 50%;
}
.face-4 {
  z-index: 2;
  width: 11.5vmin;
  height: 10vmin;
  background: #fff;
  top: 26.65vmin;
  border-radius: 50%;
}
.face-4::before {
  width: 14vmin;
  height: 29vmin;
  background: #fff;
  top: -17.8vmin;
  left: 4.7vmin;
  transform: rotate(29deg);
  border-radius: 50%;
}
.face-4::after {
  width: 14vmin;
  height: 29vmin;
  background: #fff;
  top: -17.9vmin;
  left: -7.25vmin;
  transform: rotate(-29deg);
  border-radius: 50%;
}

.body-1 {
  z-index: 2;
  width: 18.1vmin;
  height: 25vmin;
  background: #fff;
  top: 40vmin;
  left: -0.1vmin;
}
.body-1::before {
  width: 16vmin;
  height: 8vmin;
  background: #45426d;
  top: 2.8vmin;
  left: 5.2vmin;
  transform: rotate(-29deg) skewX(-4deg);
  border-radius: 50%;
}
.body-1::after {
  width: 10vmin;
  height: 1.5vmin;
  background: #45426d;
  top: 7.6vmin;
  left: -1vmin;
  transform: rotate(42.5deg);
  border-radius: 50%;
}
.body-2 {
  z-index: 2;
  width: 18vmin;
  height: 6vmin;
  background: #fff;
  top: 22.7vmin;
  left: 12.5vmin;
  transform: rotate(-46deg) skewX(-5deg);
  border-radius: 50%;
}
.body-2::before {
  width: 2vmin;
  height: 10vmin;
  background: #fff;
  top: -8.5vmin;
  left: -3.25vmin;
  transform: rotate(-9deg);
  border-radius: 50%;
}
.body-2::after {
  width: 1vmin;
  height: 3vmin;
  background: #fff;
  top: -7.3vmin;
  left: -4.2vmin;
  transform: rotate(43deg);
}
.body-3 {
  z-index: 2;
  width: 6.5vmin;
  height: 3vmin;
  background: #fff;
  top: 33.6vmin;
  left: -1.5vmin;
  transform: rotate(9deg);
  border-radius: 50%;
}
.body-3::before {
  width: 7vmin;
  height: 10vmin;
  background: #fff;
  top: -8.7vmin;
}
.body-4 {
  width: 10vmin;
  height: 10vmin;
  background: #fff;
  top: 55vmin;
  left: 25vmin;
  border-radius: 0 100% 0 0;
}
.body-4::before {
  width: 10vmin;
  height: 10vmin;
  background: #fff;
  left: -25vmin;
  border-radius: 100% 0 0 0;
}
.body-4::after {
  width: 43vmin;
  height: 10vmin;
  background: #fff;
  top: 9.6vmin;
  left: -29vmin;
}
.body-5 {
  width: 30vmin;
  height: 10vmin;
  background: #fff;
  top: 78vmin;
  left: 55.3vmin;
  transform: rotate(17deg) skewX(10deg);
  border-radius: 0 10vmin 0 0;
}
.body-6 {
  width: 30vmin;
  height: 10vmin;
  background: #fff;
  top: 78vmin;
  left: -55.3vmin;
  transform: rotate(-17deg) skewX(-10deg);
  border-radius: 10vmin 0 0 0;
}
.body-7 {
  z-index: 2;
  width: 1vmin;
  height: 11vmin;
  background: #45426d;
  top: 36.5vmin;
  left: 18.6vmin;
  transform: rotate(0.5deg);
  border-radius: 50%;
}
.body-7::before {
  width: 1vmin;
  height: 11vmin;
  background: #21142e;
  left: -18.65vmin;
  transform: rotate(-1deg);
  border-radius: 50%;
}
.body-8 {
  width: 20vmin;
  height: 10vmin;
  background: #45426d;
  top: 55vmin;
  left: 38.9vmin;
  transform: skewX(5deg);
  border-radius: 0 0 0 92%;
}
.body-8::before {
  width: 10vmin;
  height: 1vmin;
  background: #45426d;
  top: 8.9vmin;
  left: 8vmin;
  transform: rotate(16.7deg);
}
.body-9 {
  width: 13vmin;
  height: 10vmin;
  background: #21142e;
  top: 52.5vmin;
  left: -31.6vmin;
  transform: skewX(-4deg);
  border-radius: 0 0 90% 0;
}
.body-9::before {
  width: 4vmin;
  height: 1vmin;
  background: #21142e;
  top: 9.1vmin;
  left: 1vmin;
  transform: rotate(-16deg);
}
.body-10 {
  z-index: 2;
  width: 100vmin;
  height: 22vmin;
  background: #45426d;
  top: 98vmin;
  border-radius: 50%;
}

.eye-left {
  z-index: 2;
  transform: scaleX(-1);
}

.eyebrow-1 {
  z-index: 2;
  width: 8vmin;
  height: 2vmin;
  background: #21142e;
  top: -21.2vmin;
  left: 13.6vmin;
  transform: rotate(-12deg);
  border-radius: 1.4vmin 30% 0 0;
}
.eyebrow-1::before {
  width: 2.8vmin;
  height: 2.5vmin;
  background: #21142e;
  top: 0.2vmin;
  left: 7.1vmin;
  transform: skewX(18deg) rotate(5deg);
  border-radius: 0 100% 0 0;
}
.eyebrow-1::after {
  width: 2.5vmin;
  height: 1vmin;
  background: #21142e;
  top: 1.2vmin;
  left: -0.2vmin;
  transform: rotate(-10deg);
  border-radius: 25% 0 0 40%;
}
.eyebrow-2 {
  z-index: 2;
  width: 0.4vmin;
  height: 1.3vmin;
  background: #21142e;
  top: -19.1vmin;
  left: 6vmin;
  transform: rotate(10deg);
  border-radius: 50%;
}
.eyebrow-2::before {
  width: 11vmin;
  height: 5vmin;
  background: #fff;
  top: -1.3vmin;
  left: 1vmin;
  transform: rotate(-22deg);
  border-radius: 50%;
}
.eyebrow-2::after {
  width: 2vmin;
  height: 0.5vmin;
  background: #fff;
  top: 0.05vmin;
  left: 2.4vmin;
  transform: rotate(-32deg);
}

.eye-line {
  z-index: 2;
  width: 6.9vmin;
  height: 4vmin;
  background: #a9aaa5;
  top: -14.2vmin;
  left: 15.2vmin;
  transform: rotate(-12deg);
  border-radius: 50%;
}
.eye-line::before {
  width: 7.1vmin;
  height:.........完整代码请登录后点击上方下载按钮下载查看