CSS就是个装饰？不能做动画，那我来试试吧！_css室内装修效果动态效果-CSDN博客

本文链接：https://blog.csdn.net/ZGL_cyy/article/details/105663533

本文详细介绍CSS3中动画的实现方法，包括关键属性如border-radius、transform、box-shadow的使用技巧，以及如何通过@keyframes定义动画序列。通过具体示例代码，展示了元素的旋转、缩放和阴影效果。

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

1 制作动画前的准备知识

1.1 CSS3常用属性

/*倒圆角指令*/

border-radius: 100px;

/* 左上右下

右上左下 */

border-radius:10px 60px;

border-radius:10px 20px 30px 40px;

/*旋转角度*/

transform: rotate(45deg);

/*放大的倍数*/

transform: scale(1.3);

/* X:水平的位移

Y ：垂直的位移负数：上*/

transform: translate(0px,-5px);

/*2D角度的旋转 X Y*/

transform: skew(40deg,45deg);

/*阴影

水平方向的偏移垂直方向的偏移模糊度阴

影的颜色*/

box-shadow: 0px 0px 70px #D5093C;

1.2 CSS3 中的动画标签

@-ms-keyframes name{

from{}

to{}

}

@-ms-keyframes name{

0%{}

50%{}

100%{}

}

2 测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			
			body{
				
				background-color: #ffa5a5;
				
			}
			
			
			.cen{
				
				width: 200px;
			
				height: 200px;
				
				background-color: #d5093c;
				
				/*阴影   水平方向的偏移  垂直方向的偏移  模糊度 阴影的颜色*/
				 box-shadow: 0px 0px 70px #D5093C;
				 /*执行动画的调用*/
				 animation: 1s aj infinite;
				
				
			}
			
			.lef{
				
				
				/*倒圆角指令*/
				border-radius: 100px;
				/* 左上右下   右上左下 */
				/*border-radius:10px  60px;*/
				
				/*border-radius:10px 20px 30px 40px;*/
				
				position: absolute;
				
				top: 200px;
				
				left: 200px;
				
				
				
			}
			
			.rig{
				
				border-radius: 100px;
				
				position: absolute;
				
				top: 200px;
				
				left: 341px;
			}
			
			.c{
				/*旋转角度*/
				transform: rotate(45deg);
				
				position: absolute;
				
				top: 269px;
				
				left: 271px;
				
			
			}
		
			/*CSS3中的动画*/
			
			@keyframes aj{
				
                 0%{transform: scale(1)rotate(45deg);}
                 
                 50%{transform: scale(1.1)rotate(45deg);}
                 
                 100%{transform: scale(1)rotate(45deg);}
                 
			}
			
			@-moz-keyframes name{
				from{}
				to{}
			}
			
			
			@-ms-keyframes name{
				from{}
				to{}
			}
			@-webkit-keyframes name{
				from{}
				to{}
			}
		</style>
		
		
	</head>
	<body>
		
		
		<div class="cen lef" ></div>
		
		<div class="cen c"></div>
		
		<div class="cen rig"></div>
	</body>
</html>