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