PHP全站開發工程師-第08章 CSS複雜選取器
CSS3 過渡transition 1. 過渡屬性
屬性 |
描述 |
CSS |
transition |
簡寫屬性，用於在一個屬性中設定四個過渡屬性。 |
3 |
transition-property |
規定應用過渡的 CSS 屬性的名稱。 |
3 |
transition-duration |
定義過渡效果花費的時間。預設是 0。 |
3 |
transition-timing-function |
規定過渡效果的時間曲線。預設是 "ease"。 |
3 |
transition-delay |
規定過渡效果何時開始。預設是 0。 |
3 |
執行個體：demo01
<!DOCTYPE html><html><head><meta charset="utf-8"><title>變換</title><style>div {width: 100px;background: blue;}div:hover {width: 200px;background-color: red;-moz-transition: width 2s ease-in-out 0s,background-color 2s ease-in-out 1s;-webkit-transition: width 2s ease-in-out 0s,background-color 2s ease-in-out 1s;transition: width 2s ease-in-out 0s,background-color 2s ease-in-out 1s;}img {width: 100%;}</style></head><body><p><b>注意：</b>無法在 IE9 及更早 IE 版本上工作。</p><div><img src="image/avatar.jpg" /></div></body></html>
CSS3 轉換transform 1. 轉換屬性
Property |
描述 |
CSS |
transform |
適用於2D或3D轉換的元素 |
3 |
transform-origin |
允許您更改轉化元素位置 |
3 |
函數 |
描述 |
matrix(n,n,n,n,n,n) |
定義 2D 轉換，使用六個值的矩陣。（選修） |
translate(x,y) |
定義 2D 轉換，沿著 X 和 Y 軸移動元素。 |
translateX(n) |
定義 2D 轉換，沿著 X 軸移動元素。 |
translateY(n) |
定義 2D 轉換，沿著 Y 軸移動元素。 |
scale(x,y) |
定義 2D 縮放轉換，改變元素的寬度和高度。 |
scaleX(n) |
定義 2D 縮放轉換，改變元素的寬度。 |
scaleY(n) |
定義 2D 縮放轉換，改變元素的高度。 |
rotate(angle) |
定義 2D 旋轉，在參數中規定角度。 |
skew(x-angle,y-angle) |
定義 2D 傾斜轉換，沿著 X 和 Y 軸。 |
skewX(angle) |
定義 2D 傾斜轉換，沿著 X 軸。 |
skewY(angle) |
定義 2D 傾斜轉換，沿著 Y 軸。 |
translate(?px) 位置變換
translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。 rotate(?deg) 旋轉
rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
scale(x,y) 尺寸改變
scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數： skew(?deg,?deg) 傾斜
transform:skew(<angle> [,<angle>]);
包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數為空白，則預設為0，參數為負表示向相反方向傾斜。
skewX(<angle>);表示只在X軸(水平方向)傾斜。 skewY(<angle>);表示只在Y軸(垂直方向)傾斜。 3. 3D轉換 3D 轉換方法
函數 |
描述 |
matrix3d(n,n,n,n,n,n, |
定義 3D 轉換，使用 16 個值的 4x4 矩陣。 |
translate3d(x,y,z) |
定義 3D 轉化。 |
translateX(x) |
定義 3D 轉化，僅使用用於 X 軸的值。 |
translateY(y) |
定義 3D 轉化，僅使用用於 Y 軸的值。 |
translateZ(z) |
定義 3D 轉化，僅使用用於 Z 軸的值。 |
scale3d(x,y,z) |
定義 3D 縮放轉換。 |
scaleX(x) |
定義 3D 縮放轉換，通過給定一個 X 軸的值。 |
scaleY(y) |
定義 3D 縮放轉換，通過給定一個 Y 軸的值。 |
scaleZ(z) |
定義 3D 縮放轉換，通過給定一個 Z 軸的值。 |
rotate3d(x,y,z,angle) |
定義 3D 旋轉。 |
rotateX(angle) |
定義沿 X 軸的 3D 旋轉。 |
rotateY(angle) |
定義沿 Y 軸的 3D 旋轉。 |
rotateZ(angle) |
定義沿 Z 軸的 3D 旋轉。 |
perspective(n) |
定義 3D 轉換元素的透視視圖。 |
transform-origin: x-axis y-axis z-axis;
值 |
描述 |
x-axis |
定義視圖被置於 X 軸的何處。可能的值： left center right length % |
y-axis |
定義視圖被置於 Y 軸的何處。可能的值： top center bottom length % |
z-axis |
定義視圖被置於 Z 軸的何處。可能的值： length |
執行個體：demo02
HTML:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/index.css"/></head><body><h1>Css3 Transform</h1><!-- Rotate--><div class="card"><div class="box rotate"><div class="fill"></div></div><p>rotate(45deg) </p></div><div class="card"><div class="box rotateX"><div class="fill"></div></div><p>rotateX(45deg)</p></div><div class="card"><div class="box rotateY"><div class="fill"></div></div><p>rotateY(45deg)</p></div><div class="card"><div class="box rotateZ"><div class="fill"></div></div><p>rotateZ(45deg) </p></div><!-- scale--><div class="card"><div class="box scale"><div class="fill"></div></div><p>scale(2)</p></div><div class="card"><div class="box scaleX"><div class="fill"></div></div><p>scaleX(2) </p></div><div class="card"><div class="box scaleY"><div class="fill"></div></div><p>scaleY(2) </p></div><!-- skew--><div class="card"><div class="box skew"><div class="fill"></div></div><p>skew(45deg, 45deg) </p></div><div class="card"><div class="box skewX"><div class="fill"></div></div><p>skewX(45deg)</p></div><div class="card"><div class="box skewY"><div class="fill"></div></div><p>skewY(45deg)</p></div><!-- translate--><div class="card"><div class="box translate"><div class="fill"></div></div><p>translate(45px) </p></div><div class="card"><div class="box translateX"><div class="fill"></div></div><p>translateX(45px)</p></div><div class="card"><div class="box translateY"><div class="fill"></div></div><p>translateY(45px)</p></div><div class="card"><div class="box matrix"><div class="fill"></div></div><p> matrix(2, 2, 0, 2, 45, 0)</p></div><h4>Perspective : 100</h4><div class="perspective-100"><div class="card"><div class="box rotateX"><div class="fill"></div></div><p>rotateX(90deg)</p></div><div class="card"><div class="box rotateY"><div class="fill"></div></div><p>rotateY(45deg)</p></div></div><h4>Perspective : 200</h4><div class="perspective-200"><div class="card"><div class="box rotateX"><div class="fill"></div></div><p>rotateX(90deg)</p></div><div class="card"><div class="box rotateY"><div class="fill"></div></div><p>rotateY(45deg)</p></div></div><!-- transform origin--><h2>Transform origin</h2><div class="card"><div class="box rotate"><div class="fill to-100-0-0"></div></div><p>transform-origin : 100% 0 0 <br/>rotate(45deg)</p></div><div class="card"><div class="box rotate"><div class="fill to-0-100-0"></div></div><p>transform-origin : 0 100% 0<br/>rotate(45deg)</p></div><div class="card perspective-200"><div class="box rotateX"><div class="fill to-0-100-0"></div></div><p>transform-origin : 0 100% 0<br/>rotateX(45deg)</p></div><div class="card perspective-200"><div class="box rotateX"><div class="fill to-100-0-0"></div></div><p>transform-origin : 0 100% 0<br/>rotateX(45deg)</p></div><div class="card perspective-200"><div class="box rotateY"><div class="fill to-0-100-0"></div></div><p>transform-origin : 0 100% 0 <br/>rotateY(45deg)</p></div><div class="card perspective-200"><div class="box rotateY"><div class="fill to-100-0-0"></div></div><p>transform-origin : 100% 0 0<br/>rotateY(45deg)</p></div><div class="card"><div class="box scale"><div class="fill to-100-0-0"></div></div><p>transform-origin : 100% 0 0<br/>scale(2)</p></div><div class="card"><div class="box scale"><div class="fill to-0-100-0"></div></div><p>transform-origin : 0 100% 0<br/>scale(2)</p></div><div class="card"><div class="box scaleX"><div class="fill to-100-0-0"></div></div><p>transform-origin : 100% 0 0<br/>scaleX(2)</p></div><div class="card"><div class="box scaleX"><div class="fill to-0-100-0"></div></div><p>transform-origin : 0 100% 0<br/>scaleX(2)</p></div><div class="card"><div class="box scaleY"><div class="fill to-100-0-0"></div></div><p>transform-origin : 100% 0 0<br/>scaleY(2)</p></div><div class="card"><div class="box scaleY"><div class="fill to-0-100-0"></div></div><p>transform-origin : 0 100% 0<br/>scaleY(2)</p></div></body></html>
CSS:
*,*:after,*:before {box-sizing: border-box;}body {background: #F5F3F4;margin: 0;padding: 10px;font-family: 'Open Sans', sans-serif;text-align: center;}h1 {color: #4c4c4c;font-weight: 600;border-bottom: 1px solid #ccc;}h2,h4 {font-weight: 400;color: #4d4d4d;}.card {display: inline-block;margin: 10px;background: #fff;padding: 15px;min-width: 200px;box-shadow: 0 3px 5px #ddd;color: #555;}.card .box {width: 100px;height: 100px;margin: auto;background: #ddd;cursor: pointer;box-shadow: 0 0 5px #ccc inset;}.card .box .fill {width: 100px;height: 100px;position: relative;background: #03A9F4;opacity: .5;box-shadow: 0 0 5px #ccc;-webkit-transition: 0.3s;transition: 0.3s;}.card p {margin: 25px 0 0;}.rotate:hover .fill {-webkit-transform: rotate(45deg);transform: rotate(45deg);}.rotateX:hover .fill {-webkit-transform: rotateX(45deg);transform: rotateX(45deg);}.rotateY:hover .fill {-webkit-transform: rotateY(45deg);transform: rotateY(45deg);}.rotateZ:hover .fill {-webkit-transform: rotate(45deg);transform: rotate(45deg);}.scale:hover .fill {-webkit-transform: scale(2, 2);transform: scale(2, 2);}.scaleX:hover .fill {-webkit-transform: scaleX(2);transform: scaleX(2);}.scaleY:hover .fill {-webkit-transform: scaleY(2);transform: scaleY(2);}.skew:hover .fill {-webkit-transform: skew(45deg, 45deg);transform: skew(45deg, 45deg);}.skewX:hover .fill {-webkit-transform: skewX(45deg);transform: skewX(45deg);}.skewY:hover .fill {-webkit-transform: skewY(45deg);transform: skewY(45deg);}.translate:hover .fill {-webkit-transform: translate(45px, 1em);transform: translate(45px, 1em);}.translateX:hover .fill {-webkit-transform: translateX(45px);transform: translateX(45px);}.translateY:hover .fill {-webkit-transform: translateY(45px);transform: translateY(45px);}.matrix:hover .fill {-webkit-transform: matrix(2, 2, 0, 2, 45, 0);transform: matrix(2, 2, 0, 2, 45, 0);}.perspective-100 .box {-webkit-perspective: 100px;perspective: 100px;}.perspective-200 .box {-webkit-perspective: 200px;perspective: 200px;}.to-100-0-0 {-webkit-transform-origin: 100% 0 0;transform-origin: 100% 0 0;}.to-0-100-0 {-webkit-transform-origin: 0 100% 0;transform-origin: 0 100% 0;}
4. CSS3 動畫
@keyframes規則是建立動畫。 @keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。 瀏覽器支援
表格中的數字表示支援該屬性的第一個瀏覽器版本號碼。
緊跟在 -webkit-,-ms- 或 -moz- 前的數字為支援該首碼屬性的第一個瀏覽器版本號碼。
@keyframes |
43.0 |
10.0 |
16.0 |
9.0 |
30.0 |
animation |
43.0 |
10.0 |
16.0 |
9.0 |
30.0 |
當在 @keyframes 建立動畫，把它綁定到一個選取器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選取器：
規定動畫的名稱 規定動畫的時間長度 CSS3的動畫屬性
屬性 |
描述 |
CSS |
@keyframes |
規定動畫。 |
3 |
animation |
所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 |
3 |
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
