CSS3实现左右摆动和上下滑动

秒速五厘米 2021-11-05 13:28 663阅读 0赞

1、上下滑动

#award {
    
                   position: absolute;
                   top: 30px;
                   left: 365px;
    
                  -webkit-animation: move 10s infinite alternate;
                   animation: move 10s infinite alternate;
    
        }
    
              @-webkit-keyframes move {
                   0% {top: 30px;}
                   100% {top:60px;}
                }
              @keyframes move {
                   0% {top: 30px;}
                  100% {top:60px;}
                }

2、左右摆动

#award {
    
                   position: absolute;
                   top: 30px;
                   left: 365px;
    
                  -webkit-animation: shake 10s infinite;
                  animation: shake 10s infinite;
    
                  -webkit-transform-origin: 50% 100%;
                  transform-origin: 50% 100%;
    
        }
    
             @-webkit-keyframes shake{
                 50% { -webkit-transform: rotate(-10deg); }
                 100% { -webkit-transform: rotate(10deg); }
              }
            @keyframes shake{
                 50% { -webkit-transform: rotate(-10deg); }
                 100% { -webkit-transform: rotate(10deg); }
             }

3、锤子效果

.hammer .imgChuiZi {
      position: absolute;
      top: 0;
      right: 30px;
      width: 100%;
      z-index: 10002;
      -moz-transform-origin: bottom right;
      -webkit-transform-origin: bottom right;
      transform-origin: bottom 100%;
      -moz-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
      -moz-animation: chuizi 1.5s ease 9999;
      -webkit-animation: chuizi 1.5s ease 9999;
      animation: chuizi 1.5s ease 9999;
    }
    @keyframes chuizi {
      0% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }
      30% {
        -moz-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
      }
      100% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }
    }
    @-webkit-keyframes chuizi {
      0% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }
      30% {
        -moz-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
      }
      100% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }
    }
    @-moz-keyframes chuizi {
      0% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }
      30% {
        -moz-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
      }
      100% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }
    }