溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
（一）過度模塊的三要素：
1、必須要有屬性發生變化
2、必須告訴系統哪個屬性需要執行過渡效果
3、必須告訴系統過渡效果持續時長
ps：當多個屬性需要同時執行過渡效果時用逗號隔開即可
transition-property: width, background-color;
transition-duration: 5s, 5s;
示例代碼：
過渡模塊
效果圖：
變化前
變化中
變化后
（二）過渡模塊的其它屬性：
1、告訴系統延遲多少秒之后才開始過渡動畫：transition-delay: 2s;
2、告訴系統過渡動畫的運動的速度：transition-timing-function: linear;
示例代碼：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>89-過渡模塊-其它屬性</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 50px;
background-color: red;
transition-property: width;
transition-duration: 5s;
/*告訴系統延遲多少秒之后才開始過渡動畫*/
transition-delay: 2s;
}
div:hover{
width: 300px;
}
ul{
width: 800px;
height: 500px;
margin: 0 auto;
background-color: pink;
border: 1px solid #000;
}
ul li{
list-style: none;
width: 100px;
height: 50px;
margin-top: 50px;
background-color: blue;
transition-property: margin-left;
transition-duration: 10s;
}
ul:hover li{
margin-left: 700px;
}
ul li:nth-child(1){
/*告訴系統過渡動畫的運動的速度*/
transition-timing-function: linear;
}
ul li:nth-child(2){
transition-timing-function: ease;
}
ul li:nth-child(3){
transition-timing-function: ease-in;
}
ul li:nth-child(4){
transition-timing-function: ease-out;
}
ul li:nth-child(5){
transition-timing-function: ease-in-out;
}
</style></head><body><!--<div></div>--><ul>
<li>linear</li>
<li>ease</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li></ul></body></html>
不同的運動速度會導致不同的過渡效果，請看運行效果圖：
運動前
運動中
運動后
（三）過渡連寫格式
transition: 過渡屬性 過渡時長 運動速度 延遲時間;
過渡連寫注意點
1和分開寫一樣, 如果想給多個屬性添加過渡效果也是用逗號隔開即可
2連寫的時可以省略后面的兩個參數, 因為只要編寫了前面的兩個參數就已經滿足了過渡的三要素
3如果多個屬性運動的速度/延遲的時間/持續時間都一樣, 那么可以簡寫為：transition:all 0s;
示例代碼：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>過渡模塊的連寫</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 50px;
background-color: red;
/*注釋中為簡寫前的代碼：
transition-property: width;
ransition-duration: 5s;
transition: width 5s linear 0s,background-color 5s linear 0s;
transition: background-color 5s linear 0s;
transition: width 5s,background-color 5s,height 5s;*/
/*下面為簡寫后的代碼*/
transition: all 5s;
}
div:hover{
width: 300px;
height: 300px;
background-color: blue;
}
</style></head><body><div></div></body></html>
（四）過度模塊的編寫套路和案例
編寫套路：
1、不要管過渡, 先編寫基本界面
2、修改我們認為需要修改的屬性
3、再回過頭去給被修改屬性的那個元素添加過渡即可
案例1：
思路：
1、先做好基本頁面布局，給div和span添加樣式表；
2、考慮怎么實現要做的效果，和需要變動的屬性
3、給屬性添加過渡效果，在只有一種屬性變動或多個屬性過渡時間等相同的情況下推薦使用：transition:all 1s;
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>過渡模塊-彈性效果</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 150px;
background-color: green;
margin-top: 100px;
text-align: center;
line-height: 150px;
}
div span{
font-size: 80px;
transition: margin 3s;
}
div:hover span{
margin: 0 20px;
}
</style></head><body><div>
<span>L</span>
<span>M</span>
<span>S</span>
<span>碼</span>
<span>農</span>
<span>來</span>
<span>過</span>
<span>渡</span></div></body></html>
示例圖片：
過渡前
過渡中
過度后
案例2：
手風琴效果，示例代碼：
過渡模塊-手風琴效果
思路：
1、通過浮動做好基本布局，如圖：
2、考慮需要實現的效果，如下圖，即鼠標移入后，具有:hover事件的li寬度變大，其余的等大。
我們可以通過ul的:hover事件讓所有的li變小，然后通過li的:hover時間來使當前li寬度變大。案例事小，思路是大，這種思路在以后的js中或者其他的地方經常用到，即先將所有元素初始化，在單獨改變需要改變的元素屬性。
二、2d轉換模塊transform
（一）寫法：transform:值;transform的值常用的有3種：
1、旋轉：其中deg是單位, 代表多少度：transform: rotate(45deg);
2、移動：第一個參數:水平方向，第二個參數:垂直方向，transform: translate(100px, 0px);
3、縮放：第一個參數:水平方向，第二個參數:垂直方向，transform: scale(0.5, 0.5);transform: scale(1.5);
注意點:
如果取值是1, 代表不變
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要縮小
如果水平和垂直縮放都一樣, 那么可以簡寫為一個參數
ps：1、如果需要進行多個轉換, 那么用空格隔開
2、2D的轉換模塊會修改元素的坐標系, 所以旋轉之后再平移就不是水平平移的
示例代碼：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>2D轉換模塊</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 800px;
height: 500px;
border: 1px solid #000;
margin: 0 auto;
}
ul li{
list-style: none;
width: 100px;
height: 50px;
background-color: red;
margin: 0 auto;
margin-top: 50px;
text-align: center;
line-height: 50px;
}
ul li:nth-child(2){
transform: rotate(45deg);
}
ul li:nth-child(3){
transform: translate(100px, 0px);
}
ul li:nth-child(4){
transform: scale(1.5);
}
ul li:nth-child(5){
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
/*transform: translate(100px, 0px);*/
}
</style></head><body><ul>
<li>正常的</li>
<li>旋轉的</li>
<li>平移的</li>
<li>縮放的</li>
<li>綜合的</li></ul></body></html>
示例圖片：
（二）轉換模塊的形變中心點：
默認情況下所有的元素都是以自己的中心點作為參考來旋轉的, 我們可以通過形變中心點屬性來修改它的參考點。
1、寫法：transform-origin: left top;第一個參數:水平方向，第二個參數:垂直方向。
ps：取值有三種形式
具體像素：transform-origin: 200px 0px;
百分比：transform-origin: 50% 50%;
特殊關鍵字：transform-origin: center center;
2、示例代碼：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>2D轉換模塊的形變中心點</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
transform-origin: left top;
}
ul li:nth-child(1){
background-color: red;
transform: rotate(30deg);
}
ul li:nth-child(2){
background-color: green;
transform: rotate(50deg);
}
ul li:nth-child(3){
background-color: blue;
transform: rotate(70deg);
}
</style></head><body><ul>
<li></li>
<li></li>
<li></li></ul></body></html>
（三）2d轉換模塊的旋轉軸
rotate旋轉屬性旋轉是默認都是圍繞z軸旋轉，若需要改變旋轉軸可以在rotate后加上旋轉軸，即：rotateX();rotateY();rotateZ();
1、當圍繞x和y軸旋轉時就會改變屬性距離我們的距離，也就是透視，什么事透視呢，就是近大遠小。
2、你會發現元素圍繞x軸或y軸旋轉時并沒有金達遠小的效果，這時你需要添加一個透視屬性：perspective: 500px;注意：這個屬性需要添加在元素的父容器上；
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>旋轉軸向</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 800px;
height: 500px;
margin: 0 auto;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 50px;
border: 1px solid #000;
perspective: 500px;
}
ul li div{
width: 200px;
height: 200px;
background-color: #ac4345;
}
ul li:nth-child(1) div{
transform: rotateZ(45deg);
}
ul li:nth-child(2) div{
transform: rotateX(45deg);
}
ul li:nth-child(3) div{
transform: rotateY(45deg);
}
</style></head><body><ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li></ul></body></html>
示例圖片：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
