css3的animation动画属性实现闹钟左右摇摆

程序员文章站 2022-07-13 17:08:09

...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>闹钟震动</title>
<style>
#div1
{
	position: relative;
	height: 200px;
	width: 200px;
	margin: 100px;
	border: 1px solid black;
}

#div2
{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px;
  width: 100px;
  height: 100px;
	border: 1px solid black;
	background-color: red;
  animation: myfirst 5s;
}
@keyframes myfirst
{
  0% {
    transform: rotate(-15deg);
  }
  2% {
    transform: rotate(15deg);
  }
  4% {
    transform: rotate(-18deg);
  }
  6% {
    transform: rotate(18deg);
  }
  8% {
    transform: rotate(-22deg);
  }
  10% {
    transform: rotate(22deg);
  }
  12% {
    transform: rotate(-18deg);
  }
  14% {
    transform: rotate(18deg);
  }
  16% {
    transform: rotate(-12deg);
  }
  18% {
    transform: rotate(12deg);
  }
  20% {
    transform: rotate(0deg);
  }
}
 
</style>
</head>

<body>

<div id="div1">
  <div id="div2">闹钟</div>
</div>

</body>
</html>

css3的animation动画属性实现闹钟左右摇摆

css3的animation动画属性实现闹钟左右摇摆

CSS3中的Transition过度与Animation动画属性使用要点

css3中的变形（transform）、过渡（transition）、动画（animation）属性讲解-个人文章-SegmentFault思否

CSS3中Animation实现简单的手指点击动画的示例

使用CSS3各个属性实现小人的动画_html/css_WEB-ITnose

关于CSS3中Animation动画属性的用法解析

使用CSS3各个属性实现小人的动画实例代码

animation动画属性直接实现轮播的方法

CSS3动画animation相关属性与关键帧规则keyframes的详细介绍

css3使用animation属性实现背景颜色动态渐变的效果（附代码）