记一次CSS @keyframes动画旋转

bigmeow_lyj

于 2019-04-09 11:25:45 发布

阅读量1.7k

点赞数

分类专栏：新人练手

本文链接：https://blog.youkuaiyun.com/bigmeow_lyj/article/details/88996579

版权

新人练手专栏收录该内容

16 篇文章

订阅专栏

本文详细记录了一次使用CSS @keyframes创建旋转动画的实践过程，包括设置动画关键帧、定义动画速度曲线以及如何应用到元素上，帮助理解CSS动画的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">{
			margin:0 ;
			padding: 0;
		}
		.box{
			width:50px ;
			height:50px ;
			/*background: #666666;*/
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
		.box:before{
			content: '';
			width: 50px;
			height: 5px;
			background: #ccc;
			position: absolute;
			top: 59px;
			border-radius:50% ;
			animation: shadow.5s linear infinite;
		}
		.box:after{
		    content: '';
			width: 50px;
			height: 50px;
			background: #666666;
			position: absolute;	
			border-radius:3% ;
			animation: box.5s linear infinite;
		}
		@keyframes box{
			 0% {  
                transform:translateY(0)rotate(0);  
              
            }  
            25% {  
                transform:translateY(9px)rotate(22.5deg); 
            }  
            50% {  
                transform:translateY(18px)rotate(45deg); 
                border-bottom-right-radius: ;
            }  
            75% {  
                transform:translateY(9px)rotate(67.5deg);
            }  
            100% {  
               transform:translateY(0)rotate(90deg);
            }  
        }  


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