繁体
注册登录

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

折腾博客

文章最后更新时间：2024年04月13日

<!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>

2.把代码加到style.css(模板的主css里面)：

/**图片抖动**/

img:hover{-webkit-animation: tada 1s .2s ease both;-moz-animation: tada 1s .2s ease both;}

@-webkit-keyframes tada{0%{-webkit-transform:scale(1);}

10%, 20%{-webkit-transform:scale(0.9) rotate(-3deg);}

30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) rotate(3deg);}

40%, 60%, 80%{-webkit-transform:scale(1.1) rotate(-3deg);}

100%{-webkit-transform:scale(1) rotate(0);}}

@-moz-keyframes tada{0%{-moz-transform:scale(1);}

10%, 20%{-moz-transform:scale(0.9) rotate(-3deg);}

30%, 50%, 70%, 90%{-moz-transform:scale(1.1) rotate(3deg);}

40%, 60%, 80%{-moz-transform:scale(1.1) rotate(-3deg);}

100%{-moz-transform:scale(1) rotate(0);}}

@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);

opacity:0;}

40%{-webkit-transform:perspective(400px) rotateY(-10deg);}

70%{-webkit-transform:perspective(400px) rotateY(10deg);}

100%{-webkit-transform:perspective(400px) rotateY(0deg);

opacity:1;}}

@-moz-keyframes flipInY{0%{-moz-transform:perspective(400px) rotateY(90deg);

opacity:0;}

40%{-moz-transform:perspective(400px) rotateY(-10deg);}

70%{-moz-transform:perspective(400px) rotateY(10deg);}

100%{-moz-transform:perspective(400px) rotateY(0deg);

opacity:1;}}

不喜欢全站的图片都这样抖动，只希望部分的就可以。 那么我给出一个方案，给需要抖动的img前面加个div 给div加class属性=dimg 然后css代码如下：

/**图片抖动**/

.dimg img:hover{-webkit-animation: tada 1s .2s ease both;-moz-animation: tada 1s .2s ease both;}

@-webkit-keyframes tada{0%{-webkit-transform:scale(1);}

10%, 20%{-webkit-transform:scale(0.9) rotate(-3deg);}

30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) rotate(3deg);}

40%, 60%, 80%{-webkit-transform:scale(1.1) rotate(-3deg);}

100%{-webkit-transform:scale(1) rotate(0);}}

@-moz-keyframes tada{0%{-moz-transform:scale(1);}

10%, 20%{-moz-transform:scale(0.9) rotate(-3deg);}

30%, 50%, 70%, 90%{-moz-transform:scale(1.1) rotate(3deg);}

40%, 60%, 80%{-moz-transform:scale(1.1) rotate(-3deg);}

100%{-moz-transform:scale(1) rotate(0);}}

@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);

opacity:0;}

40%{-webkit-transform:perspective(400px) rotateY(-10deg);}

70%{-webkit-transform:perspective(400px) rotateY(10deg);}

100%{-webkit-transform:perspective(400px) rotateY(0deg);

opacity:1;}}

@-moz-keyframes flipInY{0%{-moz-transform:perspective(400px) rotateY(90deg);

opacity:0;}

40%{-moz-transform:perspective(400px) rotateY(-10deg);}

70%{-moz-transform:perspective(400px) rotateY(10deg);}

100%{-moz-transform:perspective(400px) rotateY(0deg);

opacity:1;}}
文章版权声明：除非注明，否则均为折腾博客原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

  • css 流光按钮
  • 一些有意思的阴影特效，建议收藏！
  • 不规则形状(缎带形状)
  • 写CSS的常用套路（background-clip:text）
  • 写CSS的常用套路（霓虹文本）
  • 写CSS的常用套路（发光文本）
  • 写CSS的常用套路（内发光）
  • 写CSS的常用套路（遮罩）

    • 发表评论

    快捷回复： 表情：
    AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
    验证码
    评论列表 （有 1 条评论，33人围观）
    网友昵称：xxlog
    xxlog V 游客 Google Chrome 86.0.4240.198 Windows 10 x64 沙发
    2021-04-09 来自湖南 回复
    [code]
    上下晃动




    /**
    * transform-origin 设置旋转元素的基点位置
    * animation-name 设置动画名称
    * animation-duration 设置动画时间
    * animation-fill-mode 设置播放后的状态
    * animation-iteration-count 设置循环播放的次数
    * transition-timing-function: cubic-bezier 贝塞尔曲线效果，它有四个值，指在X轴与Y轴的两个曲线的点，第一个点：X1 Y1;第二个点：X2 Y2
    * transform: translate3d 设置动画Z轴位移几个元素，表示只在Z轴上移动
    *
    * 需要注意：transform: translate3d 不等于 transform: translateZ
    */

    .animated {
    animation-duration: 1s; /*动画时间*/
    animation-fill-mode: both; /*播放后的状态*/
    }

    .animated {
    animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
    }

    .animated {
    animation-duration: 2s; /*动画时间*/
    }

    .container {
    background: #2D97DB;
    width: 90%;
    height: 90%;
    padding: 100px;
    margin: 20px auto;
    font-family: "微软雅黑";
    font-size: 40px;
    color: white;
    text-align: center;
    line-height: 90%;
    }

    .container:hover{
    animation-name:container; /*动画的名称*/
    transform-origin: center bottom; /*设置动画旋转元素的基点为：居中靠下*/
    cursor: pointer;
    }

    @keyframes container{
    0%,
    100%,
    20%,
    50%,
    80% {
    transition-timing-function: cubic-bezier(0.215,.61,.355,1); /*贝塞尔曲线 ： X1 Y1 X2 Y2*/
    transform: translate3d(0,0,0); /*设置只在Z轴上移动*/
    }
    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);
    }
    }
    [/code]
    取消
    微信二维码
    微信二维码
    支付宝二维码