动画的制作：

最新推荐文章于 2024-07-20 15:40:46 发布

浅沫......

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量163

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/luoyuanye2003110/article/details/127548963

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           *{
               padding: 0;
               margin: 0;
           }
           .box{
               width: 200px;
               height: 200px;
               background-color: green;
               margin:300px auto;
               /* 第二步:绑定动画
                   animation:动画名称        动画持续时间       次数
                   infinte:无限次
               */
               animation: move 0.1s infinite linear;
           }
           /* 动画:
           1.关键帧
           2.绑定动画 */
           /* 第一步:   创建关键帧 */
           @keyframes move{
               from{       /* 动画开始 */
                   transform: rotate(0);
               }
               to{           /* 动画结束 */
                   transform: rotate(360deg);
               }
           }


       </style>
   </head>
   <body>
       <div class="box"></div>
   </body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				background-color: green;
				margin:300px auto;
				/* 第二步:绑定动画 
					animation:动画名称 		动画持续时间		次数
					infinte:无限次
				*/ 
				animation: move 0.1s infinite linear;
			}
			/* 动画:
			1.关键帧
			2.绑定动画 */
			/* 第一步:	创建关键帧 */
			@keyframes move{
				from{		/* 动画开始 */
					transform: rotate(0);
				}
				to{			/* 动画结束 */
					transform: rotate(360deg);
				}
			}
				
			
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>