欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3 animate 和关键帧 @-webkit-keyframes

程序员文章站 2022-03-16 18:58:04
...
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			margin:0 auto;
			width:540px;
			height:405px;
			background:url('img/cat2.jpg') center no-repeat;
			/* 定义3D空间 */
			-webkit-transform-style: preserve-3d;
			/* 沿X轴旋转 20秒线性过过渡动画 无限次播放 */
			-webkit-animation-name: x-spin;/*定义动画名称为x-spin*/
			-webkit-animation-duration: 20s;/*定义动画时间为20s*/
			-webkit-animation-iteration-count: infinite;/*定义动画过渡为线性转换*/
			-webkit-animation-timing-function: linear;/*定义动画过渡为线性转换*/
		}
		/* 调用动画 */
		@-webkit-keyframes x-spin{
			/* 引用x-spin动画 */
			0% {
				/* 设置第一个关键帧为开始位置 */
				-webkit-transform:rotateZ(0deg);
			}
			50%{
				/* 沿X轴旋转180 */
				-webkit-transform:rotateZ(180deg);
			}
			100%{
				-webkit-transform:rotateZ(360deg);
			}
		} 
	</style>
</head>
<body>
	<div></div>
</body>
</html>