css3 过渡/旋转/动画

最新推荐文章于 2025-07-08 16:26:15 发布

原创最新推荐文章于 2025-07-08 16:26:15 发布 · 5.1k 阅读

1 ·

CC 4.0 BY-SA版权

前段_css 专栏收录该内容

13 篇文章

订阅专栏

本文通过实例代码介绍了CSS3中的过渡、旋转和动画效果，包括如何设置过渡时长、时间曲线、延迟时间，以及如何创建动画关键帧，实现元素背景颜色变化、位置移动等效果。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width:200px;
				height: 200px;
				line-height:200px;
				color: chartreuse;
				text-align: center;
			}
			
			
			.div1{
				background-color: royalblue;
				/*position: absolute;*/
				word-wrap:break-word; /*允许对长单词进行拆分，并换行到下一行*/
				font-size: 40px;
				/*设置过渡 
				 * 1 效果添加到哪个 CSS 属性上 
				 * 2 规定效果的时长
				 * */
				-webkit-transition:width 2s, height 2s, -webkit-transform 2s;
			}
			.div1:hover {
				width:400px;
				height: 400px;
				-webkit-transform:rotate(180deg);
			}
			
			
			
			.div2{
				background-color: red;
				transition-property:width; /*过渡属性名*/
				transition-duration:1s; /*过渡花费时间 默认0*/
				transition-timing-function:linear; 
				/*过渡效果时间曲线 默认ease
				 * linear：匀速
				 * ease:慢 - 快 - 慢
				 * ease-in:慢开始
				 * ease-out:慢结束
				 * ease-in-out:慢开始和结束
				 * */
				transition-delay:2s; /*过渡延迟时间默认0*/
			}
			.div2:hover {
				width:400px;
			}
			
			
			.div3{
				background-color:green;
				-webkit-animation:myfirst 5s; 
			}
			@-webkit-keyframes myfirst {
				from {background:blueviolet;}
				to {background:yellow;border-radius: 50px;}
				/*0%   {background: red;}
				25%  {background: yellow;}
				50%  {background: blue;}
				100% {background: green;}*/
			}
			
			.div4 {
				background-color:darkgoldenrod;
				position:relative;
				-webkit-animation-name:myfirst; /*动画名称*/
				-webkit-animation-duration:5s; /*花费时间*/
				-webkit-animation-timing-function:linear; /*速度曲线*/
				-webkit-animation-delay:2s; /*延迟时间*/
				-webkit-animation-iteration-count:infinite; /*播放次数 1:次数 2:infinite无限播放*/
				-webkit-animation-direction:alternate; /*下次是否逆向播放 1:normal 正常播放2:alternate 动画应该轮流反向播放*/
				-webkit-animation-play-state:running; /*是否运行 1:paused 规定动画已暂停 2:running	 规定动画正在播放*/
			}
			@-webkit-keyframes myfirst {
				0%   {background:red; left:0px; top:0px;}
				25%  {background:yellow; left:200px; top:0px;}
				50%  {background:blue; left:200px; top:200px;}
				75%  {background:green; left:0px; top:200px;}
				100% {background:red; left:0px; top:0px;}
			}
			
			
		</style>
	</head>
	<body>
		<div class="div1">运动</div>
		<div class="div2">过渡</div>
		<div class="div3">动画</div>
		<div class="div4">动画</div>
		<script>
			
			
			var div = document.getElementsByClassName('div1')[0];
//			div.style.left = '200px';
//			div.setAttribute('style','left:200px;position: absolute'); //定位改变位置
//			div.style.cssText = 'left:200px;position: absolute';
//			div.style.cssText = 'border:2px solid;border-radius:25px;'; //边框圆角
//			div.style.cssText = 'box-shadow: 10px 10px 5px #888888;' //（x y 模糊程度，颜色）盒子阴影
//			div.style.cssText = 'text-shadow: 5px 5px 5px #FF0000'; //（x y 模糊程度，颜色）文字阴影

//			div.style.cssText = '-webkit-transform: rotate(-10deg)';		// 旋转角度(左右)rotateX rotateY
//			div.style.cssText = '-webkit-transform: translate(50px,100px);' // 移动 x y 
//			div.style.cssText = '-webkit-transform: scale(2,4)'; 			// 缩放原来x y的倍数
//			div.style.cssText = '-webkit-transform: skew(20deg,20deg)'; 	// 倾斜x y 轴

//			div.style.cssText = '-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0)'; //旋转、缩放、移动、倾斜
			
			
		</script>
	</body>
</html>