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

最新推荐文章于 2021-06-19 15:34:26 发布

orangecloudy

最新推荐文章于 2021-06-19 15:34:26 发布

阅读量154

点赞数

本文链接：https://blog.csdn.net/orangecloudy/article/details/84932534

版权

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