首頁  >  文章  >  web前端  >  什麼是css過渡? css中過渡元素的簡介

什麼是css過渡? css中過渡元素的簡介

不言
不言原創
2018-08-10 10:28:493202瀏覽

這篇文章帶給大家的內容是關於什麼是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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn