手揣网教程：绿色安全纯净官方版,体验当今速度最快的浏览器！

啥是css过渡？css中过渡元素的简要介绍

时间：2024/11/4作者：未知来源：手揣网教程人气：

[摘要]本篇文章给大家带来的内容是关于什么是css过渡？css中过渡元素的简要介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。css过渡：元素从一种样式逐渐改变为另一种的效果。过渡所需的...
本篇文章给大家带来的内容是关于什么是css过渡？css中过渡元素的简要介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

css过渡：元素从一种样式逐渐改变为另一种的效果。
过渡所需的条件：

1.所过渡的元素必须有css样式。

2.必须有过渡时间。

以下是过渡元素的属性：

transition:简写属性，用于在一个属性中设置四个过渡属性。

transition-property:规定应用过渡的 CSS 属性的名称。

transition-duration:过渡所用的时时间。

transition-timing-function:过渡元素的时间曲线，属性值有linear(匀速的过程)、ease(逐渐变慢的过程)、ease-in(加速的过程)、ease-out(减速的过程)、cubic-bezier(0,0,0,0)贝塞尔曲线

transition-delay:指定一个过渡的开始时间（即多长时间后开始执行），默认是0

过渡效果我们一般用在鼠标滑过或者点击后，我这里以鼠标滑过为例：

1.鼠标滑过宽度变为原来的120%

2.鼠标滑过加上阴影

3.鼠标滑过时实现平移、旋转、缩放、扭曲等效果。

transform(2D转换)

属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)

html部分

<body>
	<div id="box">
			
	</div>
</body>

css部分：

#box{
			height: 200px;
			width: 200px;
			border:1px solid #000;
			/*1.鼠标滑过宽度变为原来的120%*/
			transition-property: width; /*所要过渡的属性名称*/
			transition-duration: 1s;/*过渡的时间*/
			transition-timing-function: linear;/*过渡的时间曲线*/
			transition-delay: 0;/*过渡的开始时间*/
			/*2.鼠标滑过加上阴影*/
			transition-property: box-shadow; /*所要过渡的属性名称*/
			transition-duration: 1s;/*过渡的时间*/
			transition-timing-function: linear;/*过渡的时间曲线*/
			transition-delay: 0;/*过渡的开始时间*/
			
			/*以上写法比较麻烦所以可以简写成：*/
			transition: all 1s linear 0s; /*一般用 all 代替所有要过渡的属性名称*/
			
			-ms-transition: all 1s linear 0s;/*兼容IE10+*/
			-moz-transform: all 1s linear 0s;/*兼容 Firefox */
			-o-transition: all 1s linear 0s;/* 兼容Opera */
			-webkit-transform:  all 1s linear 0s;/* 兼容Safari and Chrome */;
			
		}
		
		/*transform(2D转换)
		属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)*/
		
		#box:hover{
			width: 120%;
			box-shadow: 0px 0px 5px orange;
			
	       /*3.鼠标滑过时实现平移、旋转、缩放、扭曲等效果*/
			/*1.平移*/
			transform: translate(50px,50px);  /*translate() 如果一个值表示x轴需要平移的距离，两个值则表示x、y轴需要平移的距离*/
			-webkit-transform: translate(50px,50px);/* 兼容Safari and Chrome */;
			-ms-transform: translate(50px,50px);/*兼容IE10+*/
			-moz-transform: translate(50px,50px);/*兼容 Firefox */
			-o-transform: translate(50px,50px);/* 兼容Opera */
			/*只让x轴平移*/
			transform: translateX(50px); 
			
			-webkit-transform: translateX(50px);/* 兼容Safari and Chrome */;
			-ms-transform: translateX(50px);/*兼容IE10+*/
			-moz-transform: translateX(50px);/*兼容 Firefox */
			-o-transform:  translateX(50px);/* 兼容Opera */
			/*只让y轴平移*/
			transform: translateY(50px);
			
			-webkit-transform: translateY(50px);/* 兼容Safari and Chrome */;
			-ms-transform: translateY(50px);/*兼容IE10+*/
			-moz-transform: translateY(50px);/*兼容 Firefox */
			-o-transform:  translateY(50px);/* 兼容Opera */
			
			/*2.旋转*//*兼容性同 平移*/
			transform:rotate(45deg); /*正值表示顺时针旋转，负值表示逆时针旋转*/
			 /*只让x轴旋转*/
			 transform:rotateX(45deg);
			 /*只让y轴旋转,相当一3D旋转*/
			 transform:rotateY(45deg);
			 
			 
			/*3.缩放*//*兼容性同 平移*/
			transform:scale(0,0.2); /*两个值，第一个表示水平缩放，第二个表示竖直缩放*/
			
			/*4.扭曲*//*兼容性同 平移*/
			
			transform:skew(30deg, 30deg); /*第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。*/
	
		}
相关推荐：
css3的动画(animation)属性的详解（附代码）
怎么纯用css代码使文字展示闪动效果？（代码示例）
如何使用CSS 和D3实现摆线摇摆的效果动画
以上就是什么是css过渡？css中过渡元素的简要介绍的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：啥是css过渡？css中过渡元素的简要介绍



Copyright © 2012-2018 手揣网教程(http://www.shouchuai.com) .All Rights Reserved 网站地图 友情链接

免责声明：本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除，敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版