432day（动画实例，动画旋转）

最新推荐文章于 2024-04-21 01:55:59 发布

原创最新推荐文章于 2024-04-21 01:55:59 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用CSS动画实现元素的缩放和旋转效果。通过定义关键帧动画，可以使图片在页面中实现从原始大小到放大再恢复的过程，同时让包含图片的div元素进行360度旋转。这不仅增强了网页的视觉吸引力，还展示了CSS动画的强大功能。

《2018年12月9日》【连续432天】

标题：动画实例，动画旋转；

内容：

<style>
		img {
			width: 100px;
			height: auto;
			animation: heart .5s infinite;
		}
		@keyframes heart {
			0% {
				transform: scale(1);
			}
			50% {
				transform: scale(1.1);
			}
			100% {
				transform: scale(1);
			}
		}
	</style>

<head>
	<meta charset="UTF-8">
	<title>animation</title>
	<style>
	 	div {
			width: 214px;
			height: 214px;
			position: relative;
	 	}
	 	div p {
	 		position: absolute;
	 		top: 0;
	 		left: 0;
	 		text-align: center;
	 		line-height: 214px;
	 		width: 100%;
	 		height: 100%;
	 	}
		div  img {
			animation: rotate linear 2s infinite;
		}
		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<div>
		<img src="images/web.png" alt="">
		<p>web</p>
	</div>
</body>