java旋转图片制作流程

<!DOCTYPE html>
<html>
	<head>
		<style> 
		#you{
			width:200px;
			height:200px;
			background:red; 
			animation:myfirst 5s;
			-moz-animation:myfirst 5s; /* Firefox */
			-webkit-animation:myfirst 5s; /* Safari and Chrome */		
		}
		@keyframes myfirst{

			0%   {background:red; transform:rotate(0deg);}
			25%  {background:yellow;transform:rotate(30deg);}
			50%  {background:blue;transform:rotate(90deg);}
			75%  {background:purple;transform:rotate(120deg);}
			100% {background:green;transform:rotate(150deg);}
		}
		</style>
	   </head>
<body>
	<div id="you">
		<img src="..\img\马保国.jpg">
	</div>
	<p>
		<b>
			注释:
		</b>
			当动画完成时,会变回初始的样式。
	</p>

	<p>
		<b>
			注释:
		 </b>
			本例在 Internet Explorer 中无效。
	</p>

	</body>
</html>

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页