css animation动画

admin • • 物联网

代码

<!DOCTYPE html>
<html ng-app="my_app">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		</script>
		<style type="text/css">
			.my-animation {
				position: absolute;
				right: 300px;
				padding: 0 10px;
				line-height: 40px;
				font-size: 22px;
				color: red;
				border: 1px solid red;
				/* 动画名称 动画时长 动画运动速度 */
				animation: anima 1500ms linear;
				/* 设置动画播放次数: infinite-无限次执行 */
				animation-iteration-count: infinite;
			}

			/* 动画名称 */
			@keyframes anima {
				0% {
					transform: scale(.8);
				}

				50% {
					transform: scale(1);
				}

				100% {
					transform: scale(.8);
				}
			}

			/* 动画关键帧 */
			div.my-animation:hover {
				/* 设置动画是否暂停*/
				animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div class="my-animation">测试</div>
	</body>
</html>

效果

 

 

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>