css3 动画

最新推荐文章于 2025-11-23 20:23:18 发布

原创最新推荐文章于 2025-11-23 20:23:18 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS3中各种变形效果的实现方法，包括旋转、缩放、倾斜及位移等，并通过实例展示了如何使用过渡和动画属性来增强用户体验。



div{
	width:300px;
	margin:50px auto;
	background-color:yellow;
	text-align:center;
}
/* css3 变形处理 */

/* rotate 顺时针旋转 */
.divRotate:hover{
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
/* 缩放 水平 垂直 方向*/
.divScale:hover{
	-webkit-transform:scale(1.5, 5);
	-moz-transform:scale(1.5, 5);
	-o-transform:scale(1.5, 5);
}

/* 倾斜 水平 垂直 方向 */
.divSkew:hover{
	-webkit-transform:skew(30deg, 30deg);
	-moz-transform:skew(30deg, 30deg);
	-o-transform:skew(30deg, 30deg);
}

/*  移动 水平 垂直 方向 */
.divTranslate:hover{
	-webkit-transform:translate(100px, -50px);
	-mox-transform:translate(100px, -50px);
	-o-transform:translate(100px, -50px);
}

/* css3 动画 */
/* transition */
.divTransition1{
	-webkit-transition:background-color 1s linear, width 1s linear;
	-moz-transition: background-color 1s linear;
	-o-transition: background-color 1s linear;
}
.divTransition1:hover{
	background-color:#00ffff;
	width:900px;
}

.divTransition2{
	-webkit-transition: background-color 1s ease-in, -webkit-transform 1s ease-in;
}
.divTransition2:hover{
	background-color: #00ffff;
	-webkit-transform:translate(-500px);
	/*-webkit-transform:rotate(360deg);*/
}

/* animations */
.divAnimations{
	background-color:red;
}

/* 动画中的关键帧  */
@-webkit-keyframes mycolor{
	0%{
		background-color: red;
		-webkit-transform: rotate(0deg);
	}
	40%{
		background-color: darkblue;
		-webkit-transform: rotate(360deg);
	}
	70%{
		background-color: yellow;
		-webkit-transform: rotate(720deg);
	}
	100%{
		background-color: red;
		-webkit-transform: rotate(1080deg);
	}
}

.divAnimations{
	-webkit-animation-name: mycolor;
	-webkit-animation-duration: 1s; /* 花费的时间 */
	-webkit-animation-timing-function: linear; /* 平滑过渡函数 */
	-webkit-animation-iteration-count: 5; /* 动画播放次数 */
}
/* 
平滑过渡函数:动画开始时到结束时的速度
linear: 同样的速度改变
ease-in: 先慢后快
ease-out: 先快后慢
ease: 慢，快， 慢
*/



<div class="divRotate">
divRotate test word
</div>


<div class="divScale">
divScale test word
</div>

<div class="divSkew">
divSkew test word
</div>

<div class="divTranslate">
divTranslate test word
</div>

<div class="divTransition1">
divTransition1 test word
</div>


<div class="divTransition2">
divTransition2 test word
</div>


<div class="divAnimations">
divAnimations test word;
</div>