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

最新推荐文章于 2024-06-11 22:32:41 发布

weixin_33814685

最新推荐文章于 2024-06-11 22:32:41 发布

阅读量5k

点赞数

文章标签： python 前端 ViewUI

原文链接：https://my.oschina.net/zzjweb/blog/1617471

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/zzjweb/blog/1617471