【CSS】11-css动画

关注

原创最新推荐文章于 2026-08-25 09:53:25 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

Html/CSS动画效果个人练习（11） CSS动画效果个人练习第十一天 Html源代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>water</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <section></section 阅读详情

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>