div+css布局实现睡觉中的圣诞老人效果代码

代码语言:html

所属分类:布局界面

代码描述:div+css布局实现睡觉中的圣诞老人效果代码

代码标签: 睡觉 圣诞 老人

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html, body {
          width: 100%;
          height: 100%; 
        }
        
        * {
          box-sizing: border-box;
        }
        
        .snores {
          position: absolute;
          left: 45%;
          top: 45%;
          font-family: cursive;
        }
        
        .snore {
          font-size: 28px;
          color: #eeeff1;
          position: absolute;
          top: 40px;
        }
        
        .snore1 {
          -webkit-animation: snore-anim 3s linear 0s infinite;
                  animation: snore-anim 3s linear 0s infinite;
        }
        
        .snore2 {
          -webkit-animation: snore-anim 3s linear 1s infinite;
                  animation: snore-anim 3s linear 1s infinite;
        }
        
        .snore3 {
          -webkit-animation: snore-anim 3s linear 2s infinite;
                  animation: snore-anim 3s linear 2s infinite;
        }
        
        @-webkit-keyframes snore-anim {
          
           0% {
            opacity: 1;
            transform: translate(0,0) scale(0.5);
          }
          50% {
            opacity: 0.7;
            transform: translate(20px, -70px) scale(1.2);
          }
          
          100% {
            opacity: 0;
            transform: translate(50px, -140px) scale(0.5);
          }
        }
        
        @keyframes snore-anim {
          
           0% {
            opacity: 1;
            transform: translate(0,0) scale(0.5);
          }
          50% {
            opacity: 0.7;
            transform: translate(20px, -70px) scale(1.2);
          }
          
          100% {
            opacity: 0;
            transform: translate(50px, -140px) scale(0.5);
          }
        }
        
        .disc {
          background-color: #c0c4c7;
          border-radius: 50%;
          width: 285px;
          height: 45px;
          position: absolute;
          left: -55px;
          bottom: -35px;
          z-index: -2;
        }
        
        .circular-bg {
          background-color: #EEEEEE;
          border-radius: 50%;
          width: 500px;height: 500px;
          box-shadow: 0 550px 0 -250px #093D55 inset;
          border: 1px solid;
          position: relative;
          z-index: 5;
          margin: 20px auto;
        }
        
        .moon {
          width: 80px;
          height: 80px;
          box-shadow: -40px 0px 0 0 #fff inset;
          border-radius: 50%;
          background-color: #093D55;
          position: absolute;
          right: 130px;
          top: 50px;
        }
        
        .santa {
          position: absolute;
          left: 35%;
          bottom: 25%;
        }
        
        
        .hat-space {
          width: 75px;
          height: 100px;
          box-shadow: 30px 0 0 0 #fff inset;
          border-radius: 50%;
          background-color: transparent;
          position: absolute;
          left: 45px;
          bottom: -18px;
          transform: rotate(35deg);
        }
        
        .hat {
          width: 100px;
          height: 65px;
          background-color: #DA4642;
          border-radius: 100% 20% 20% 20%;
          position: absolute;
          left: -60px;
          bottom: 20px;
          transform: rotate(-15deg);  
        }
        
        .furr {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          background-color: #fff;
          position: absolute;
          bottom: -10px;
          right: 40px;
        }
        
        .face {
           width: 60px;
          height: 90px;
          box-shadow: 30px 0px 0 0 #F5CFC1 inset;
          border-radius: 50%;
          background-color: transparent;
          position: absolute;
          left: 10px;
          bottom: 10px;
          transform: rotate(20deg);
        }
        
        .eyebrows {
          width: 10px;
          height: 23px;
          border-radius: 50%;
          background-color: transparent;
          position: absolute;
          transform: rotate(-15deg);
          -webkit-animation: eye-scale ease-in-out 1.5s infinite;
                  animation: eye-scale ease-in-out 1.5s infinite;
          
        }
        
        @-webkit-keyframes eye-scale {
          
          0% {
            transform: scale(1);
          }
          100% {
            transform: scale(1.1);
          }
        }
        
        @keyframes eye-scale {
          
          0% {
            transform: scale(1);
          }
          100% {
            transform: scale(1.1);
          }
        }
        
        .eyebrows--left {
          left: 10px;
          bottom: 10px;
          box-shadow: 5px 0px 0 0 #fff inset, 8px 0px 0 -4px #000 ;
        }
        
        .eyebrows--right {
          left: 10px;
          bottom: 50px;
          box-shadow: 5px 0px 0 0 #fff inset, 8px 0px 0 -4px #000 ;
          transform: rotate(10deg); 
        }
        
        .nose {
          width: 1px;
          height: 1px;
          border-radius: 50%;
          background-color: transparent;
          position: absolute;
          box-shadow: 5px -8px 0 2.5px #F5CFC1,10px -12px 0 12px #edb39e;
          left: 23px;
          bottom: 27px;
          z-index:1;
        }
        
        .beard {
          width: 65px;
          height: 65px;
          border-radius: 50%;
          background-color: #fff;
          position: absolute;
          top: -4px;
          left: 29px;
          transform: rotate(25deg); 
          box-shadow: 15px 40px 0 -5px #fff, 35px 40px 0 -3px #fff, 20px -15px 0 0px #fff; 
        }
        
        .beard--left {
          width: 30px;
          height: 15px;
          border-radius: 0 0 50% 50%;
          background-color: #fff;
          position: absolute;
          right: 15px;
          bottom: -52px;
          transform: rotate(-30deg); 
          
        }
        
        .beard--right {
          width: 30px;
          height: 15px;
          border-radius:50% 50% 0 0;
          background-color: #fff;
          position: absolute;
          right: 55px;
          bottom: 40px;
          transform: rotate(-10deg); 
        }
        
        
        .mouth {
          width: 12px;
          height: 12px;
          border-radius:50%;
          background-color: #F2ABA1;
          position: absolute;
          right: -5px;
          bottom: 30px;
          -webkit-animation: mouth-scale ease-in-out 1.5s infinite;
                  animation: mouth-scale ease-in-out 1.5s infinite;
        }
        
        @-webkit-keyframes mouth-scale {
          
          0% {
            transform: scale(1);
          }
          100% {
            transform: scale(1.4);
          }
        }
        
        @keyframes mouth-scale {
          
          0% {
            transform: scale(1);
          }
          100% {
            transform: scale(1.4);
          }
        }
        
        @-webkit-keyframes arm-anim {
          
          0% {
            transform: rotate(-25deg);
          }
        
          30% {
            width: 30px;
            height: 65px;
            transform: rotate(-85deg) translate(10px, 10px);
            border-radius: 0 80% 80% 0;
            border: none;
            box-shadow:-2px 10px 0 -3px #fff, -20px 8px 0 0 #B03331 inset, -20px -10px 0 0 #B03331 inset, -20px 15px 0 0 #B03331 inset;
          }
          
           70% {
            width: 30px;
            height: 65px;
            transform: rotate(-85deg) translate(10px, 10px);
            border-radius: 0 80% 80% 0;
            border: none;
            box-shadow:-2px 10px 0 -3px #fff, -20px 8px 0 0 #B03331 inset, -20px -10px 0 0 #B03331 inset, -20px 15px 0 0 #B03331 inset;
          }
          
           100% {
            width: 26px;
            height: 65px;
            border-radius: 20px 20px 0 0;
            background-color: transparent;
            transform: rotate(-25deg); 
            box-shadow: 0px 8px 0 0 #fff, -26px 8px 0 0 #B03331 inset; 
           } 
        }
        
        @keyframes arm-anim {
          
          0% {
            transform: rotate(-25deg);
          }
        
          30% {
            width: 30px;
            height: 65px;
            transform: rotate(-85deg) translate(10px, 10px);
            border-radius: 0 80% 80% 0;
            border: none;
            box-shadow:-2px 10px 0 -3px #fff, -20px 8px 0 0 #B03331 inset, -20px -10px 0 0 #B03331 inset, -20px 15px 0 0 #B03331 inset;
          }
          
           70% {
            width: 30px;
            height: 65px;
            transform: rotate(-85deg) translate(10px, 10px);
            border-radius: 0 80% 80% 0;
            border: none;
            box-shadow:-2px 10px 0 -3px #fff, -20px 8px 0 0 #B03331 inset, -20px -10px 0 0 #B03331 inset, -20px 15px 0 0 #B03331 inset;
          }
          
           100% {
            width: 26px;
            height: 65px;
            border-radius: 20px 20px 0 0;
            background-color: transparent;
            transform: rotate(-25deg); 
            box-shadow: 0px 8px 0 0 #fff, -26px 8px 0 0 #B03331 inset; 
           } 
        }
        
        .hand--up {
          position: absolute;
          left: 95px;
          bottom: 85px;
        }
        
        .arm--right {
          width: 26px;
          height: 65px;
          border-radius: 20px 20px 0 0;
          background-color: transparent;
          position: absolute;
          transform: rotate(-25deg); 
          box-shadow: 0px 8px 0 0 #fff, -26px 8px 0 0 #B03331 inset;
          -webkit-animation: arm-anim 6s linear 20ms infinite;
                  animation: arm-anim 6s linear 20ms infinite;
          transform-origin: 0 15px;
        }
        
        
        .hand--right {
          width: 18px;
          height: 25px;
          border-radius: 0 0 50px 20px;
          background-color: #4C4C4C;
          position: absolute;
          transform: rotate(-20deg);
          transform-origin: 0 0;
          -webkit-animation: hand-anim 6s linear 20ms infinite;
                  animation: hand-anim 6s linear 20ms infinite;
        }
        
        @-webkit-keyframes hand-anim {
          0% {
              transform:  scale(1) translate(30px,64px) rotate(-25deg);
          }
          15% {
            transform: scale(1) translate(55px, 45px) rotate(-55deg);
          }
          30% {
            transform: scale(1) translate(65px, 8px) rotate(-85deg);
          }
          40% {
            transform: scaleX(0.8) translate(80px, 8px) rotate(-85deg);
          }
          50% {
            transform: scaleX(1) translate(65px, 8px) rotate(-85deg);
          }
          60% {
            transform: scaleX(0.8) translate(80px, 8px) rotate(-85deg);
          }
          70% {
            transform: scale(1) translate(65px, 8px) rotate(-85deg);
          }
          85% {
            transform: scale(1) translate(55px, 45px) rotate(-55deg);
          }
          100% {
            transform:  scale(1) translate(30px,64px) rotate(-25deg);
          }
        }
        
        @keyframes hand-anim {
          0% {
              transform:  scale(1) translate(30px,64px) rotate(-25deg);
          }
          15% {
            transform: scale(1) translate(55px, 45px) rotate(-55deg);
          }
          30% {
            transform: scale(1) translate(65px, 8px) rotate(-85deg);
          }
          40% {
            transform: scaleX(0.8) translate(80px, 8px) rotate(-85deg);
          }
          50% {
            transform: scaleX(1) translate(65px, 8px) rotate(-85deg);
          }
          60% {
            transform: scaleX(0.8) translate(80px, 8px) rotate(-85deg);
          }
          70% {
            transform: scale(1) translate(65px, 8px) rotate(-85deg);
          }
          85% {
            transform: scale(1) translate(55px, 45px) rotate(-55deg);
          }
          100% {
            transform:  scale(1) translate(30px,64px) rotate(-25deg);
          }
        }
        
        .hand--right:before {
          content: '';
          width: 10px;
          height: 15px;
          border-radius: 5px 0 50% 50%;
          background-color: #4C4C4C;
          position: absolute;
          left: -5px;
          bottom: 10px;
          transform: rotate(30deg); 
          
        }
      .........完整代码请登录后点击上方下载按钮下载查看

网友评论0