CSS3-7.1-CSS3的過渡與交換
一：transition：過渡屬性
- CSS的transition允許CSS的屬性值在一定時間區內平滑的過渡
- 鼠標點擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值
- 屬性值順序
- transition-property：參與過渡的屬性
- 可以單獨指定某個CSS屬性
- all/none
- transition-duration：過渡開始到過渡完成的時間
- 默認值是0，意味着不會有效果
- 以秒或毫秒爲單位
- transition-timing-function：過渡的樣式屬性
- ease：默認值，逐漸變慢
- linear：勻速
- ease-in：加速
- ease-out：減速
- ease-in-out：加速然後減速
- transition-delay：過渡開始前的延遲時間
- 默認值是0，可以忽略
- 以秒或毫秒爲單位
- transition-property：參與過渡的屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS過渡屬性</title>
<style type="text/css">
div{
width: 100px;
height: 20px;
background-color: blue;
/*
寬度屬性過渡效果
過渡時長2s,延時0.2s開始執行
linear勻速過渡
*/
transition: width 2s linear 0.2s;
/* 兼容Firefox瀏覽器 */
-moz-transition: width 2s linear 0.2s;
/* 兼容Safair瀏覽器 */
-webkit-transition: width 2s linear 0.2s;
}
div:hover{
width: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果動態圖
二：transform：變換屬性
- 通過使用變換屬性可以對元素進行旋轉、拉伸、翻轉縮放等操作
- 變換屬性分爲2D變換與3D變換
- 通常與過渡屬性搭配使用
變換屬性
1.transform：定義元素向2D或3D變換
2.transform-origin：改變轉換元素的位置
1、transform
- 定義元素向2D或3D變換
- 屬性值
- none：元素不進行變化
- translate(x,y)：定義2D平移變換
- translate3d(x,y，z)：定義3D變換
- translateX(x)：定義沿X軸平移變換，Y軸與Z軸同理
- scale(x,y)：定義2D縮放變換
- scale3d(x,y,z)：定義3D縮放變換
- scaleX(x)：定義設置X軸的值進行縮放，Y軸與Z軸同理
- rotate(angle)：定義2D旋轉，角度值後需跟角度單位deg
- skew(x-angle,y-angle)：定義沿着X軸和Y軸的2D傾斜轉換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>變換屬性</title>
<style type="text/css">
div{
width: 80px;
height: 80px;
/*
過渡時長1s,延時0s開始執行
linear勻速過渡
*/
transition: all 1s linear 0s;
}
.div1{
background-color: red;
}
.div2{
background-color: green;
}
.div3{
background-color: blue;
}
.div4{
background-color: pink;
}
/* 定義2D平移變換 */
.div1:hover{
transform: translate(20px,20px);
}
/* 定義2D等比縮放 */
.div2:hover{
transform: scale(2);
}
/* 定義沿着X軸和Y軸的2D傾斜轉換 */
.div3:hover{
transform: skew(20deg,20deg);
}
.div4:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
效果動態圖
2、transform-origin
- 設置旋轉元素的基點位置
- 起始地址是左上角
- 2D轉換元素可以改變元素的X軸和Y軸
- 3D轉換元素還可以更改元素的Z軸
- 屬性值
- x-axis
- left、right、center
- **px
- 百分比
- y-axis
- left、right、center
- **px
- 百分比
- z-axis
- **px
- x-axis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基點位置</title>
<style type="text/css">
.div1{
width: 80px;
height: 80px;
background-color: blue;
/*
過渡時長1s,延時0s開始執行
linear勻速過渡
*/
transition: all 1s linear 0s;
/* 基點是元素的右下角 */
transform-origin: 100% 100%;
}
/* 定義2D旋轉360deg */
.div1:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
效果動態圖
