css3特效（上下左右晃动效果）

朱雀 2021-04-13 17:27 2053阅读 1赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    				 
    .animated {
      animation-duration: 2s; /*动画时间*/
      animation-fill-mode: both; /*播放后的状态*/
    }
     
    .animated {
      animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
    }
     
    .animated {
      animation-duration: 2s; /*动画时间*/
    }
     
    .up,.around {
      background: #2D97DB;
      width: 90%;
      height: 90%;
      padding: 20px;
      margin: 20px auto;
      font-family: "微软雅黑";
      font-size: 40px;
      color: white;
      text-align: center;
      line-height: 90%;
    }
    .around{
    	background-color: #44a036;
    }
     
    .up{
      animation-name:upAnimation; /*动画的名称*/
      transform-origin: center bottom; /*设置动画旋转元素的基点为*/
      cursor: pointer;
    }
    .around{
      animation-name:aroundAnimation; /*动画的名称*/
      transform-origin: center bottom; /*设置动画旋转元素的基点为*/
      cursor: pointer;
    }
     
    @keyframes upAnimation{
      0%,
      100%,
      20%,
      50%,
      80% {
      transition-timing-function: cubic-bezier(0.215,.61,.355,1); 
      transform: translate3d(0,0,0);
      }
      40%,
      43%{
      transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
      transform: translate3d(0,-30px,0);
      }
      70%{
      transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
      transform: translate3d(0,-15px,0);
      }
      90%{
      transform: translate3d(0,-4px,0);
      }
    }
    
    @keyframes aroundAnimation{
      0%,
      100%,
      20%,
      50%,
      80% {
      transition-timing-function: cubic-bezier(0.215,.61,.355,1); 
      transform: translate3d(0,0,0);
      }
      40%,
      43%{
      transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
      transform: translate3d(-20px,0,,0);
      }
      70%{
      transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
      transform: translate3d(-10px,0px,0);
      }
      90%{
      transform: translate3d(20px,0,0);
      }
    }
    	</style>
    </head>
    <body>
    	<div class="up animated">上下晃动</div>
    	<div class="around animated">左右晃动</div>
    </body>
    </html>