div+css实现眼睛流泪哭泣动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现眼睛流泪哭泣动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
  background: #000;
  height: 100vh;
  overflow: hidden;
}
  
#face {
  position: absolute;
  top: 40%;
  left: 50%;
}

#face .eye {
  position: absolute;
  width: 100px;
  height: 50px;
  background: #000;
  border-bottom: 6px solid #fff;
  border-radius: 100%;
  transform: translate(-50%, -50%);
}

#face .eye.left {
  margin-left: -100px;
}

/* 画睫毛 */
#face .eye.left .eyelash {
  position: absolute;
  width: 25px;
  height: 40px;
  margin: 10px 0 0 65px;
  border-right: 3px solid #fff;
  border-top: 3px solid transparent;
  border-radius: 100%;
  transform-origin: 0% 0%;
}

#face .eye.left .eyelash:nth-child(1) {
  height: 22px;
  transform: rotate(10deg) translateY(8px) translateY(-1px);
}

#face .eye.left .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.left .eyelash:nth-child(2) {
  height: 24px;
  transform: rotate(20deg) translateY(16px) translateY(-2px);
}

#face .eye.left .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.left .eyelash:nth-child(3) {
  height: 26px;
  transform: rotate(30deg) translateY(24px) translateY(-3px);
}

#face .eye.left .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.left .eyelash:nth-child(4) {
  height: 28px;
  transform: rotate(40deg) translateY(32px) translateY(-4px);
}
  
#face .eye.left .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.left .eyelash:nth-child(5) {
  height: 30px;
  transform: rotate(50deg) translateY(40px) translateY(-5px);
}
    
#face .eye.left .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.left .eyelash:nth-child(6) {
  height: 32px;
  transform: rotate(60deg) translateY(48px) translateY(-6px);
}
      
#face .eye.left .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.left .eyelash:nth-child(7) {
  height: 34px;
  transform: rotate(70deg) translateY(56px) translateY(-7px);
}
        
#face .eye.left .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.left .eyelash:nth-child(8) {
  height: 36px;
  transform: rotate(80deg) translateY(64px) translateY(-8px);
}
          
#face .eye.left .eyelash:nth-child(-n+3) {
  display: none;
}

/* 留下来的，可以使用 */
/* #face .eye.left .eyelash:nth-child(9) {
  height: 38px;
  transform: rotate(90deg) translateY(72px) translateY(-9px);
}
            
#face .eye.left .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.left .eyelash:nth-child(10) {
  height: 40px;
  transform: rotate(100deg) translateY(80px) translateY(-10px);
}
              
#face .eye.left .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.left .eyelash:nth-child(11) {
  height: 42px;
  transform: rotate(110deg) translateY(88px) translateY(-11px);
}
                
#face .eye.left .eyelash:nth-child(-n+3) {
  display: none;
} */

#face .eye.right {
  margin-left: 100px;
} 

#face .eye.right .eyelash {
  position: absolute;
  width: 25px;
  height: 40px;
  margin: 10px 0 0 5px;
  border-left: 3px solid #fff;
  border-top: 3px solid transparent;
  border-radius: 100%;
  transform-origin: 100% 0%;
}

#face .eye.right .eyelash:nth-child(1) {
  height: 22px;
  transform: rotate(-10deg) translateY(8px) translateY(-1px);
}

#face .eye.right .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.right .eyelash:nth-child(2) {
  height: 24px;
  transform: rotate(-20deg) translateY(16px) translateY(-2px);
}
  
#face .eye.right .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.right .eyelash:nth-child(3) {
  height: 26px;
  transform: rotate(-30deg) translateY(24px) translateY(-3px);
}
    
#face .eye.right .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.right .eyelash:nth-child(4) {
  height: 28px;
  transform: rotate(-40deg) translateY(32px) translateY(-4px);
}
      
#face .eye.right .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.right .eyelash:nth-child(5) {
  height: 30px;
  transform: rotate(-50deg) translateY(40px) translateY(-5px);
}
        
#face .eye.right .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.right .eyelash:nth-child(6) {
  height: 32px;
  transform: rotate(-60deg) translateY(48px) translateY(-6px);
}
          
#face .eye.right .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.right .eyelash:nth-child(7) {
  height: 34px;
  transform: rotate(-70deg) translateY(56px) translateY(-7px);
}
            
#face .eye.right .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.right .eyelash:nth-child(8) {
  height: 36px;
  transform: rotate(-80deg) translateY(64px) translateY(-8px);
}
              
#face .eye.right .eyelash:nth-child(-n+3) {
  display: none;
}

/* 留下来的，可以使用 */
/* #face .eye.right .eyelash:nth-child(9) {
  height: 38px;
  transform: rotate(-90deg) translateY(72px) translateY(-9px);
}
                
#face .eye.right .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.right .eyelash:nth-child(10) {
  height: 40px;
  transform: rotate(-100deg) translateY(80px) translateY(-10px);
}
                  
#face .eye.right .eyelash:nth-child(-n+3) {
  display: none;
}

#face .eye.right .eyelash:nth-child(11) {
  height: 42px;
  transform: rotate(-110deg) translateY(88px) translateY(-11px);
}
                    
#face .eye.right .eyelash:nth-child(-n+3) {
  display: none;
} */

#face .tear {
  position: absolute;
  width: 1000px;
  height: 1000px;
  background: #000;
  transform: translate(-50%, -50%);
  filter: blur(10px) contrast(30);
}

/* 右眼中的眼泪 */
#face .tear_right .drops {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 40px;
}

#face .tear_right .drops .drop {
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 100%;
}

/* 以下是画眼泪部分，基本为重复部分~ */
#face .tear_right:nth-child(1) .drops {
  -webkit-animation: horizontalRight 5714ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5714ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(1) .drops .drop {
  -webkit-animation: vertical 5714ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5714ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(2) .drops {
  -webkit-animation: horizontalRight 4494ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4494ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(2) .drops .drop {
  -webkit-animation: vertical 4494ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4494ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(3) .drops {
  -webkit-animation: horizontalRight 3050ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3050ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(3) .drops .drop {
  -webkit-animation: vertical 3050ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3050ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(4) .drops {
  -webkit-animation: horizontalRight 4097ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4097ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(4) .drops .drop {
  -webkit-animation: vertical 4097ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4097ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(5) .drops {
  -webkit-animation: horizontalRight 4590ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4590ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(5) .drops .drop {
  -webkit-animation: vertical 4590ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4590ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(6) .drops {
  -webkit-animation: horizontalRight 6537ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 6537ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(6) .drops .drop {
  -webkit-animation: vertical 6537ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 6537ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(7) .drops {
  -webkit-animation: horizontalRight 5184ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5184ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(7) .drops .drop {
  -webkit-animation: vertical 5184ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5184ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(8) .drops {
  -webkit-animation: horizontalRight 3838ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3838ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(8) .drops .drop {
  -webkit-animation: vertical 3838ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3838ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(9) .drops {
  -webkit-animation: horizontalRight 6516ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 6516ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(9) .drops .drop {
  -webkit-animation: vertical 6516ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 6516ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(10) .drops {
  -webkit-animation: horizontalRight 5493ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5493ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(10) .drops .drop {
  -webkit-animation: vertical 5493ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5493ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(11) .drops {
  -webkit-animation: horizontalRight 3410ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3410ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(11) .drops .drop {
  -webkit-animation: vertical 3410ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3410ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(12) .drops {
  -webkit-animation: horizontalRight 4098ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4098ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(12) .drops .drop {
  -webkit-animation: vertical 4098ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4098ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(13) .drops {
  -webkit-animation: horizontalRight 3456ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3456ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(13) .drops .drop {
  -webkit-animation: vertical 3456ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3456ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(14) .drops {
  -webkit-animation: horizontalRight 3521ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3521ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(14) .drops .drop {
  -webkit-animation: vertical 3521ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3521ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(15) .drops {
  -webkit-animation: horizontalRight 5549ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5549ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(15) .drops .drop {
  -webkit-animation: vertical 5549ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5549ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(16) .drops {
  -webkit-animation: horizontalRight 6120ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 6120ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(16) .drops .drop {
  -webkit-animation: vertical 6120ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 6120ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(17) .drops {
  -webkit-animation: horizontalRight 3903ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3903ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(17) .drops .drop {
  -webkit-animation: vertical 3903ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3903ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(18) .drops {
  -webkit-animation: horizontalRight 3719ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3719ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(18) .drops .drop {
  -webkit-animation: vertical 3719ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3719ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(19) .drops {
  -webkit-animation: horizontalRight 6290ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 6290ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(19) .drops .drop {
  -webkit-animation: vertical 6290ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 6290ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(20) .drops {
  -webkit-animation: horizontalRight 3355ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3355ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(20) .drops .drop {
  -webkit-animation: vertical 3355ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3355ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(21) .drops {
  -webkit-animation: horizontalRight 5157ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5157ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(21) .drops .drop {
  -webkit-animation: vertical 5157ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5157ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(22) .drops {
  -webkit-animation: horizontalRight 4106ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4106ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(22) .drops .drop {
  -webkit-animation: vertical 4106ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4106ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(23) .drops {
  -webkit-animation: horizontalRight 7324ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7324ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(23) .drops .drop {
  -webkit-animation: vertical 7324ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7324ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(24) .drops {
  -webkit-animation: horizontalRight 4533ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4533ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(24) .drops .drop {
  -webkit-animation: vertical 4533ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4533ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(25) .drops {
  -webkit-animation: horizontalRight 6195ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 6195ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(25) .drops .drop {
  -webkit-animation: vertical 6195ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 6195ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(26) .drops {
  -webkit-animation: horizontalRight 4679ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4679ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(26) .drops .drop {
  -webkit-animation: vertical 4679ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4679ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(27) .drops {
  -webkit-animation: horizontalRight 4218ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4218ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(27) .drops .drop {
  -webkit-animation: vertical 4218ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4218ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(28) .drops {
  -webkit-animation: horizontalRight 6599ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 6599ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(28) .drops .drop {
  -webkit-animation: vertical 6599ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 6599ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(29) .drops {
  -webkit-animation: horizontalRight 3725ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3725ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(29) .drops .drop {
  -webkit-animation: vertical 3725ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3725ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(30) .drops {
  -webkit-animation: horizontalRight 7533ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7533ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(30) .drops .drop {
  -webkit-animation: vertical 7533ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7533ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(31) .drops {
  -webkit-animation: horizontalRight 3351ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3351ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(31) .drops .drop {
  -webkit-animation: vertical 3351ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3351ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(32) .drops {
  -webkit-animation: horizontalRight 5716ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5716ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(32) .drops .drop {
  -webkit-animation: vertical 5716ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5716ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(33) .drops {
  -webkit-animation: horizontalRight 7178ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7178ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(33) .drops .drop {
  -webkit-animation: vertical 7178ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7178ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(34) .drops {
  -webkit-animation: horizontalRight 7847ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7847ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(34) .drops .drop {
  -webkit-animation: vertical 7847ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7847ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(35) .drops {
  -webkit-animation: horizontalRight 6410ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 6410ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(35) .drops .drop {
  -webkit-animation: vertical 6410ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 6410ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(36) .drops {
  -webkit-animation: horizontalRight 5562ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5562ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(36) .drops .drop {
  -webkit-animation: vertical 5562ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5562ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(37) .drops {
  -webkit-animation: horizontalRight 7289ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7289ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(37) .drops .drop {
  -webkit-animation: vertical 7289ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7289ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(38) .drops {
  -webkit-animation: horizontalRight 5111ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5111ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(38) .drops .drop {
  -webkit-animation: vertical 5111ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5111ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(39) .drops {
  -webkit-animation: horizontalRight 7863ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7863ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(39) .drops .drop {
  -webkit-animation: vertical 7863ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7863ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(40) .drops {
  -webkit-animation: horizontalRight 4787ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4787ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(40) .drops .drop {
  -webkit-animation: vertical 4787ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4787ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(41) .drops {
  -webkit-animation: horizontalRight 7717ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7717ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(41) .drops .drop {
  -webkit-animation: vertical 7717ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7717ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(42) .drops {
  -webkit-animation: horizontalRight 5788ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5788ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(42) .drops .drop {
  -webkit-animation: vertical 5788ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5788ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(43) .drops {
  -webkit-animation: horizontalRight 7515ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7515ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(43) .drops .drop {
  -webkit-animation: vertical 7515ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7515ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(44) .drops {
  -webkit-animation: horizontalRight 7386ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7386ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(44) .drops .drop {
  -webkit-animation: vertical 7386ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7386ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(45) .drops {
  -webkit-animation: horizontalRight 7837ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7837ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(45) .drops .drop {
  -webkit-animation: vertical 7837ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7837ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(46) .drops {
  -webkit-animation: horizontalRight 5453ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5453ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(46) .drops .drop {
  -webkit-animation: vertical 5453ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5453ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(47) .drops {
  -webkit-animation: horizontalRight 4721ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4721ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(47) .drops .drop {
  -webkit-animation: vertical 4721ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4721ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(48) .drops {
  -webkit-animation: horizontalRight 3262ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3262ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(48) .drops .drop {
  -webkit-animation: vertical 3262ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3262ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(49) .drops {
  -webkit-animation: horizontalRight 7593ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7593ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(49) .drops .drop {
  -webkit-animation: vertical 7593ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7593ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(50) .drops {
  -webkit-animation: horizontalRight 4940ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4940ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(50) .drops .drop {
  -webkit-animation: vertical 4940ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4940ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(51) .drops {
  -webkit-animation: horizontalRight 7499ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7499ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(51) .drops .drop {
  -webkit-animation: vertical 7499ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7499ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(52) .drops {
  -webkit-animation: horizontalRight 3174ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3174ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(52) .drops .drop {
  -webkit-animation: vertical 3174ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3174ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(53) .drops {
  -webkit-animation: horizontalRight 7129ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7129ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(53) .drops .drop {
  -webkit-animation: vertical 7129ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7129ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(54) .drops {
  -webkit-animation: horizontalRight 5386ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5386ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(54) .drops .drop {
  -webkit-animation: vertical 5386ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5386ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(55) .drops {
  -webkit-animation: horizontalRight 5868ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5868ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(55) .drops .drop {
  -webkit-animation: vertical 5868ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5868ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(56) .drops {
  -webkit-animation: horizontalRight 4667ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4667ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(56) .drops .drop {
  -webkit-animation: vertical 4667ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4667ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(57) .drops {
  -webkit-animation: horizontalRight 6378ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 6378ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(57) .drops .drop {
  -webkit-animation: vertical 6378ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 6378ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(58) .drops {
  -webkit-animation: horizontalRight 4767ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4767ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(58) .drops .drop {
  -webkit-animation: vertical 4767ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4767ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(59) .drops {
  -webkit-animation: horizontalRight 6191ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 6191ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(59) .drops .drop {
  -webkit-animation: vertical 6191ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 6191ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(60) .drops {
  -webkit-animation: horizontalRight 4922ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4922ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(60) .drops .drop {
  -webkit-animation: vertical 4922ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4922ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(61) .drops {
  -webkit-animation: horizontalRight 6947ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 6947ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(61) .drops .drop {
  -webkit-animation: vertical 6947ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 6947ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(62) .drops {
  -webkit-animation: horizontalRight 7820ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 7820ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(62) .drops .drop {
  -webkit-animation: vertical 7820ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 7820ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(63) .drops {
  -webkit-animation: horizontalRight 6282ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 6282ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(63) .drops .drop {
  -webkit-animation: vertical 6282ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 6282ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(64) .drops {
  -webkit-animation: horizontalRight 4163ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 4163ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(64) .drops .drop {
  -webkit-animation: vertical 4163ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 4163ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(65) .drops {
  -webkit-animation: horizontalRight 5489ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 5489ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(65) .drops .drop {
  -webkit-animation: vertical 5489ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 5489ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(66) .drops {
  -webkit-animation: horizontalRight 6442ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 6442ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(66) .drops .drop {
  -webkit-animation: vertical 6442ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 6442ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(67) .drops {
  -webkit-animation: horizontalRight 3526ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3526ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(67) .drops .drop {
  -webkit-animation: vertical 3526ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3526ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(68) .drops {
  -webkit-animation: horizontalRight 3217ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: horizontalRight 3217ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:nth-child(68) .drops .drop {
  -webkit-animation: vertical 3217ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: vertical 3217ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}

#face .tear_right:n.........完整代码请登录后点击上方下载按钮下载查看