纯css绘制美女动画

下载代码

html

css

分享到微信朋友圈

html

css

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background-color: #221a2f;
  overflow:hidden;
}

.container{
  width:100vw;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.girl{
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  position: relative;
  top:10vmin;
  transform:scale(0.7);
}

.face{
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
}

.forehead{
  width:60vmin;
  height:8vmin;
  clip-path: polygon(1% 0, 95% 0, 100% 100%, 0% 100%);
  background-color: #f8d6cd;
}

.middle-face{
  width:60vmin;
  height:60vmin;
  border-radius:0% 1% 37% 41% / 10% 3% 49% 52% ;
  background-color: #f8d6cd;
  position: relative;
  bottom:1vmin;
}

.eye-brow-left, .eye-brow-right{
  width:19vmin;
  height:8vmin;
  border-radius:50%;
  position: absolute;
  top:8vmin;
  border-top:1.5vmin solid #000;
  transform:rotateZ(-5deg);
}

.eye-brow-left{
  left:4vmin;
}

.eye-brow-right{
  right:4vmin;
  transform:rotateZ(5deg);
}

.left-eye, .right-eye{
  width:14vmin;
  height:12vmin;
  border-radius:10% 10% 46% 52% / 10% 10% 25% 24% ;
  border-bottom:0.8vmin solid #000;
  position: absolute;
  top:11vmin;
}

.left-eye{
  left:9vmin;
}

.lash1, .lash2, .lash3, .lash4, .lash5, .lash6, .lash7, .lash8, .lash9, .lash10, .lash11, .lash12, .lash13{
  width:2vmin;
  height:2vmin;
  clip-path: polygon(0 0, 48% 100%, 100% 0);
  background-color: #000;
  position: absolute;
  top:10vmin;
  transform:rotateZ(25deg);
}

.lash2{
  height:2vmin;
  top:10.6vmin;
  left:0.8vmin;
}

.lash3{
  top:11vmin;
  left:2vmin; 
}

.lash4{
  top:11.3vmin;
  left:3vmin; 
}

.lash5{
  top:11.3vmin;
  left:4vmin; 
  transform:rotateZ(5deg);
}

.lash6, .lash7, .lash8, .lash9, .lash10, .lash11, .lash12, .lash13{
  top:11.3vmin;
  left:5vmin; 
  transform:rotateZ(5deg);
}

.lash7{
  left:6vmin;
}

.lash8{
  left:7vmin;
}

.lash9{
  left:8vmin;
}

.lash10, .lash11, .lash12, .lash13{
  left:9vmin;
  transform:rotateZ(-10deg);
}

.lash11{
 left:10vmin;
}

.lash12{
  top:11vmin;
  left:11vmin;
  transform:rotateZ(-30deg);
}

.lash13{
  top:10.5vmin;
  left:12vmin;
  transform:rotateZ(-30deg);
}

.right-eye{
  right:9vmin;
}

.lips{
  transform:scale(0.8);
  position: relative;
  top:13vmin;
}

.upper-lip1, .upper-lip2{
  width:10vmin;
  height:10vmin;
  background-color: #f96c3e;
  border-radius:83% 17% 91% 9% / 88% 28% 72% 12% ;
  position: absolute;
  top:35vmin;
  transform:rotateZ(30deg);
}

.upper-lip1{
  left:20vmin;
  border-bottom:10vmin solid #ed6539;
}

.upper-lip2{
  right:20vmin;
  transform:rotateZ(-120deg);
  border-bottom:10vmin solid #ed6539;
}

.lower-lip{
  width:23vmin;
  height:8vmin;
  border-radius:49% 51% 48% 52% / 20% 15% 85% 80%;
  background-color: #f96c3e;
  position: absolute;
  top:40vmin;
  left:18.5vmin;
  border-top:2vmin solid #ed6539;
}

.nose-left, .nose-right{
  width:5vmin;
  height:5vmin;
  border-radius:26% 74% 48% 52% / 75% 15% 85% 25% ;
  position: absolute;
  top:31.5vmin;
  border-left:0.5vmin solid #e6c5bc;
  transform:rotateZ(10deg);
}

.nose-left{
  left:25vmin;
}

.nose-left:after{
  content:"";
  width:4vmin;
  height:0.5vmin;
  background-color: #e6c5bc;
  position: absolute;
  top:4vmin;
}

.nose-right{
  transform:scaleX(-1) rotateZ(10deg);
  right:25vmin;
}

.nose-right:after{
  content:"";
  width:4vmin;
  height:0.5vmin;
  background-color: #e6c5bc;
  position: absolute;
  top:4vmin;
}

.bangs{
  width:63vmin;
  height:15vmin;
  background-color: #221a2f;
  border-radius:0% 0% 0% 100% / 10% 10% 30% 100% ;
  position: absolute;
  top:-8vmin;
  left:-2.5vmin;
  z-index: 1;
}

.hair{
  width:100vmin;
  height:95vmin;
 background-color: #221a2f;
  border-radius:50% 50% 49% 51% / 65% 65% 35% 35% ;
  position: absolute;
  top:-35vmin;
  left:-21vmin;
  border-left:1vmin solid #253380;
  border-right:1vmin solid #532d7e;
  z-index:-1;
}
/*Cover1:smoothen the sharp part near the forehead on the left*/
.cover1{
  width:5vmin;
  height:18vmin;
  background-color: #f8d6cd;
  position: absolute;
  border-radius:50%;
  top:-7vmin;
  left:-0.2vmin;
}
/*Cover2:smoothen the sharp part near the forehead on the right*/
.cover2{
  width:5vmin;
  height:10vmin;
  background-color: #f8d6cd;
  position: absolute;
  border-radius:50%;
  top:-7vmin;
  right:0.5vmin; 
  transform:rotateZ(-20deg);
}

.neck{
  width:25vmin;
  height:20vmin;
  background-color: #f8d6cd;
  position: relative;
  bottom:4vmin;
  z-index: -1;
  background-image: linear-gradient(to bottom, #e6c5bc,  #f8d6cd);
}

.neck-connect{
  width:65vmin;
  height:15vmin;
  clip-path: polygon(31% 0, 69% 0, 100% 100%, 0% 100%);
  background-color: #f8d6cd;
  position: relative;
  bottom:4.5vmin;
}

.neck-down{
  width:64.6vmin;
  height:20vmin;
  border-radius:0% 0% 49% 51% / 0% 0% 100% 100% ;
  background-color: #f8d6cd;
  position: relative;
  bottom:4.9vmin;
}

.dress-left{
  width:20vmin;
  height:0.5vmin;
  transform:rotateZ(-30deg);
  background-color: #51406e;
  position: absolute;
  left:-18vmin;
  top:5vmin;
  z-index: -1;
}

.dress-right{
  width:20vmin;
  height:0.5vmin;
  transform:scaleX(-1) rotateZ(-30deg);
  background-color: #51406e;
  position: absolute;
  right:-18vmin;
  top:5vmin;
  z-index: -1;
}

.circ1{
  width:30vmin;
  height:30vmin;
  border-radius:50%;
  background-color: #f97875;
  position: absolute;
  left:-20vmin;
  bottom:2vmin;
  animation:alterBubble 5s infinite alternate ease;
}

.circ2, .circ5{
  width:5vmin;
  height:5vmin;
  border-radius:50%;
  background-color: #f26a42;
  position: absolute;
  left:60vmin;
  bottom:3vmin;
    animation:alterBubble 5s infinite alternate ease;
}

.circ3{
  width:60vmin;
  height:60vmin;
  border-radius:50%;
  background-color: #482f85;
  position: absolute;
  left:80vmin;
  bottom:30vmin;
  opacity:0.6;
    animation:alterBubble 10s infinite alternate ease;
}

.circ4, .circ6{
  width:20vmin;
  height:20vmin;
  border-radius:50%;
  background-color: #1d4bd2;
  position: absolute;
  left:-40vmin;
  bottom:35vmin;
  opacity:0.6;
    animation:alterBubble 4s infinite alternate ease;
}

.circ5{
  background-color: #fad2d0;
  top:-80vmin;
  left:-30vmin;
  opacity: 0.8;
    animation:alterBubble 5s infinite alternate ease;
}

.circ6{
  background-color: #794538;
  width:60vmin;
  height:60vmin;
  left:-80vmin;
  top:-150vmin;
  opacity: 0.5;
    animation:alterBubble 7s infinite alternate ease;
}

.circ9{
  width:8vmin;
  height:8vmin;
  border-radius:50%;
  position: absolute;
  bottom:0;
  left:3vmin;
  background-color: #faf0af;
  opacity:0.7;
  animation:alterBubble 4s infinite alternate ease; 
}

.circ10{
  width:8vmin;
  height:8vmin;
  border-radius:50%;
  position: absolute;
  bottom:8vmin;
  right:8vmin;
  background-color:#bd95c9;
  opacity:0.7;
  animation:alterBubble 3s infinite alternate ease; 
}

.circ7, .circ8{
  width:30vmin;
  height:30vmin;
  border-radius:50%;
  position: absolute;
  top:-10vmin;
  right:0vmin;
  background-color: #faf0af;
  opacity:0.7;
    animation:alterBubble 6s infinite alternate ease;
}

.circ8{
  background-color: #f6bed6;
  left:-20vmin;
  top:40vmin;
    animation:alterBubble 8s infinite alternate ease;
}

@keyframes alterBubble{
  50%{
    transform:scale(1.2);
  }
  
  100%{
    transform:scale(1);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg