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); /*第一個參數表示水平方向的傾斜角度，第二個參數表示垂直方向的傾斜角度。*/}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
