【CSS】11-css动画

最新推荐文章于 2024-08-10 22:43:21 发布

JeffHan^_^

最新推荐文章于 2024-08-10 22:43:21 发布

阅读量1.6k

点赞数

分类专栏： CSS教程文章标签： css css3 动画

本文链接：https://blog.csdn.net/Jeffhan_java/article/details/125993298

版权

CSS教程专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用CSS动画实现球形元素的无缝循环移动，涉及关键帧动画、动画属性设置，如队列、次数、循环方式和速度函数。通过实例演示了如何控制元素颜色变化和旋转，为前端开发者提供了一个CSS动画的基础教程。

摘要由CSDN通过智能技术生成

11-css动画、

动画：
    animation：动画队列名称 执行时间 执行次数(具体次数或者infinite) 循环方式  速度函数
    
    循环方式：normal普通，reverse反向动画，alternate往复动画
    速度函数：linear线性 ，ease-in先慢后快，ease-out先快后慢，ease-in-out先慢后快再慢

实例：

<style type="text/css">
	
	#bg-div {
		width: 600px;
		height: 600px;
		border: solid 2px green;
		
		margin: 20px auto;
		
		position: relative;
	}
	
	#ball-1 {
		width: 150px;
		height: 150px;
		background-color: green;
		border-radius: 50%;
		
		color: white;
		font-size: 30px;
		font-weight: bolder;
		text-align: center;
		line-height: 150px;
		
		position: absolute;
		top: 0;
		left: 0;
		
		/* 动画 */
		animation: ball-1-animation 4s infinite normal linear;
	}
	
	@keyframes ball-1-animation{
		/* from{
			transform: translate(0px, 0px);
		}
		to{
			transform: translate(200px, 200px);
		} */
		
		/* from {
			top: 0;
			left: 0;
			transform: rotateY(0deg);
		}
		to {
			top: 450px;
			left: 450px;
			transform: rotateY(360deg);
		} */
		
		0% {
			top: 0;
			left: 0;
			transform: rotateY(0deg);
			
			background-color: green;
		}
		20% {
			top: 450px;
			left: 0;
			transform: rotateY(360deg);
			
			background-color: red;
		}
		45% {
			top: 450px;
			left: 450px;
			transform: rotateY(0deg);
			
			background-color: yellow;
		}
		75% {
			top: 0;
			left: 450px;
			transform: rotateY(360deg);
			
			background-color: pink;
		}
		100% {
			top: 0;
			left: 0;
			transform: rotateY(0deg);
			
			background-color: green;
		}
	}
	
</style>
</head>
<body>

<div id="bg-div">
	<div id="ball-1">王子玉</div>
</div>

</body>