css animation动画

最新推荐文章于 2024-11-15 16:31:12 发布

曹振华

最新推荐文章于 2024-11-15 16:31:12 发布

阅读量582

点赞数

文章标签： css 前端 animation 动画

本文链接：https://blog.csdn.net/chadcao/article/details/131653587

版权

代码

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

效果