大標題小節
| 一、2D | 1. css3 漸變的語法及應用
2. 動畫過渡：transition
3. 2D轉換屬性：transform |
| 二、3D | 1. 3D轉換
2. 3D視距
3. 3D翻轉方法
4. 3D位置移動
5. 3D縮放 |
| 三、3D動畫 | 1. @keyframes
2. 動畫屬性animation |
一、2D
1. css3 漸變的語法及應用；
（1）線性漸變： linear-gradient(方向[可選], 顏色1, 顏色2)；
一個方向到另一個方向筆直進行漸變；
- 方向： top/left，從上到下 / 從左到右。
<style>background: linear-gradient(top, #9f9, #ff9);
</style>
<style>background: linear-gradient(left, #99f, #f99);
</style>
此外，還可以給漸變過程寫百分比。
（2）徑向漸變： radial-gradient(正圓橢圓[可選],顏色1,顏色2)；
從起點到終點顏色從內到外進行圓形漸變；
- circle： 漸變為最大的圓形；
- ellipse： （橢圓）根據元素性質漸變，元素為正方形時顯示效果與circle無異；
（3）重復漸變： repeating-radial-gradient(方向[可選],顏色1,顏色2)；
會按照規律一層一層循環；
- 方向：circle / left，以圓形方式重復 / 從左到右的方式循環。
全部效果：
代碼：
<style>ul{margin:0;display: flex;flex-wrap: wrap;}li{margin:0 10px 0;padding:0;list-style: none;width: 100px;height: 100px;border:1px solid #000;}li:first-child{background:-webkit-linear-gradient(top,#f99,#ff9);background:-moz-linear-gradient(top,#f99,#ff9)}li:nth-child(2){background:-webkit-linear-gradient(left,#f00 50%,#00f);background:-moz-linear-gradient(left,#f00 50%,#99f)}li:nth-child(3){background:-webkit-linear-gradient(top,#f00,#0f0,#00f);background:-moz-linear-gradient(top,#f00,#0f0,#00f)}li:nth-child(4){background:-webkit-radial-gradient(circle,#f00,#00f);background: -moz-radial-gradient(#f00,#00f)}li:nth-child(5){width:200px;background:-webkit-radial-gradient(ellipse,#f00,#00f);background: -moz-radial-gradient(ellipse,#f00,#00f)}li:nth-child(6){background:-webkit-repeating-radial-gradient(circle,#f00 10%,#00f 11%,#f00 12%,#00f 13%,#f00 14%);background: -moz-radial-gradient(circle,#f00 10%,#00f 11%,#f00 12%,#00f 13%,#f00 14%)}</style>
2. 動畫過渡：transition:
transition: 2s linear all;，transition有4個屬性值。類似 background，動畫時間是必要屬性值，如：transition: 2s;。
（1）屬性值解讀：
① 動畫從開始到結束的時間：數字s；
② 動畫過渡的速度：
- linear：勻速；
- ease：慢快慢，默認；
- ease-in：慢開始；
- ease-out：慢結束；
- ease-in-out：慢開始慢結束；
- cubic-bezier()：自定義貝茲爾曲線；
③ 動畫延時執行：數字s；
指動畫效果在多少時間之后開始執行，通常省略。
④ 發生改變的屬性名：默認all
假設高度發生了改變，那么可以寫成：transition: 2s linear height。
（3）transition 包含的單個屬性：
- transition-property:all/屬性名1,屬性名2，定義過渡屬性；
- transition-duration: 2s，定義過渡時間（必要參數）；
- transition-delay: 2s，延遲多少時間開始；
- transition-timing-function: 速度，定義過渡速度；
（4）特點：
只支持數值的變化（背景色也是十六進制的數值）；誰（指標簽）的樣式發生改變， transition 就加在誰身上；
<style>div{width:260px; height:40px; border:1px solid #000;background:#f99;margin-bottom:20px;}html:hover div{width: 450px;}html:hover div:nth-child(2){background: #99f;}div.linear{transition: 5s linear all;}div.ease{transition: 5s ease all;}div.ease-in{transition: 5s ease-in all;}div.ease-out{transition: 5s ease-out all;}div.ease-in-out{transition: 5s ease-in-out all;}div.cubic-bezier{transition: 5s cubic-bezier(0.4, 1.9, .6, .8 ) all;}
</style>
<body> <div class="linear">1. linear，勻速
</div> <div class="ease"> 2. ease，慢快慢（默認）
</div> <div class="ease-in"> 3. ease-in，慢開始
</div> <div class="ease-out"> 4. ease-out，慢結束
</div> <div class="ease-in-out">5. ease-in-out，慢開始慢結束
</div><div class="cubic-bezier">6. cubic-bezier，自定義貝茲爾曲線
</div>
</body>
3. 2D 轉換屬性：transform:
常與 transition 一起。屬性值：
（1）translate(數字px,數字px);，平移。
通過 translate() 方法，元素從其當前位置移動，效果與 position: relative; 相同；
兩個正數向左向下平移，兩個負值向右向上平移。
（2）rotate(數字deg);，旋轉，默認沿中心點旋轉。
順時針 旋轉給定的角度；負值元素將逆時針旋
轉；
擴展屬性描述
| transform | 向元素應用2D 或 3D 轉換 |
| transform-orign | 允許你改變被轉換元素的位置（rotate() 默認繞中心點旋轉），屬性值有：left、top、bottom、right、right top（靠右靠下）、50px 20px（水平50px，垂直20px的位置）、-50px -50px等 |
<style>div{width: 300px;height: 200px;border: 1px solid #000;overflow: hidden; margin:10px auto;}img{display: block;width: 100%;height: 100%; transition:2s} div.one img:nth-child(1){transform-origin: 150px 200px;} div.one img:nth-child(2){transform-origin: 150px 0;}div.one:hover img{transform: rotate(180deg)}div.two{position: relative;}div.two img:nth-child(1){position: absolute;transform-origin: 0 0;}div.two:hover img:nth-child(1){transform: rotate(-90deg)}div.three{position: relative;}div.three img{position: absolute;transform-origin: 0 0;}div.three img:nth-child(2){transform: rotate(90deg)} div.three:hover img:nth-child(1){transform: rotate(-90deg)}div.three:hover img:nth-child(2){transform: rotate(0)}
</style>
<body><div class="one"><img src="../imgs/蔡蔡1.jpg" alt="" srcset=""><img src="../imgs/蔡蔡2.jpg" alt="" srcset=""></div><div class="two"><img src="../imgs/蔡蔡1.jpg" alt="" srcset=""><img src="../imgs/蔡蔡2.jpg" alt="" srcset=""></div><div class="three"><img src="../imgs/蔡蔡1.jpg" alt="" srcset=""><img src="../imgs/蔡蔡2.jpg" alt="" srcset=""></div>
</body>
（3）scale(2,1);，縮放。
第一個參數：水平（寬度）縮放，第二個參數：垂直（高度縮放）；
縮小的值在 0-1 之間，負數會讓元素倒過來；常用于圖片縮放。
（4）skew(數字deg, 數字deg);，傾斜；
第一個參數：正數水平向右傾斜，負數水平向左傾斜。第二個參數：正數順時針向下傾斜，負數逆時針向上傾斜；
（5）matrix();，矩陣。
martrix() 方法需要六個參數，包含數學函數，允許旋轉、縮放、移動以及傾斜元素。
屬性值中含兩個參數，前一個參數通常是水平方向，后一個是垂直方向。
<style>ul{word-wrap: break-word;}ul li{list-style: none; width: 120px; height: 100px; background:#99f; margin-bottom: 20px;transition:.6s;}ul li:nth-child(1):hover{transform: translate(20px, 5px);}ul li:nth-child(2):hover{transform: rotate(45deg);}ul li:nth-child(3):hover{transform: scale(2,1);}ul li:nth-child(4):hover{transform: skew(15deg,-15deg);}ul li:nth-child(5):hover{transform: matrix(1.2, 1, 0, 1, 10, 10);}ul li:nth-child(6):hover{transform: translate(20px, 5px) scale(1, .5);}
</style>
<body><ul><li>平移
<br/>translate(20px, 5px)
</li><li>旋轉
<br/>rotate(45deg)
</li><li>縮放
<br/>scale(2,1)
</li><li>傾斜
<br/>skew(15deg,-15deg)
</li><li>矩陣
<br/>matrix(1.2, 1, 0, 1, 10, 10)
</li><li>多個2D效果
<br/>translate(20px, 5px) scale(1, .5)
</li></ul>
</body>
二、3D
1. 3D轉換
3D轉換中，轉換是使元素改變形狀、尺寸和位置的一種效果。你可以使用2D或3D轉換來轉換元素。
兼容性：
（1）IE10及以上和 Firefox 支持3D轉換；
（2）Chorme 和 Safari 需要前綴 -webkit-；
（3）Opera，IE9 仍不支持 3D 轉換，它只支持 2D 轉換；
3D 效果仍然是使用 transform 來實現的，主要看后面的屬性值是屬于2D 還是 3D 的。
2. 3D視距
在平面上看出3D效果，有種近大遠小的感覺，通常需要在寫完后刪掉perspective；
（1）perspective(距離px) ，當使用3D效果時，需要 perspective 屬性配合；
（2）使用方法：
① 給父元素寫，操作所有子元素；
<style>div{perspective:200px;}p{width:100px;height:100px;transform:translate3d(0,0,-500);background:#f99;}
</style><div><p></p>
<div>
② 給子元素寫，操作單個子元素；
<style>p{width:100px;height:100px;transform:perspective(200px) translate3d(0,0,-50px);background:#f99;}
</style><p></p>
3. 3D翻轉方法：
（1） rotateX(30deg); 、rotateY(30deg);
（2） rotate() 的效果和 rotateZ() 效果相同；
<style>*{margin:0; padding:0;}ul{perspective:400px;width: 500px; margin: auto;}li{width: 200px; height: 80px;background: #f99;margin-bottom:20px;list-style: none;transition: 2s;}ul.rotate li:nth-child(1):hover{transform: rotateX(30deg);-webkit-transform: rotateX(30deg);}ul.rotate li:nth-child(2):hover{transform: rotateY(30deg);-webkit-transform: rotateY(30deg);}ul.rotate li:nth-child(3):hover{transform: rotateZ(30deg);-webkit-transform: rotateZ(30deg);}
</style>
<body><ul class="rotate"><li>水平X翻轉
</li><li>Y翻轉
</li><li>Z翻轉
</li></ul>
</body>
4. 3D位置移動
3種寫法：
（1）transform:translate3d(30px,30px,800px);
（2）transform:translateZ(800px)translateY(30px);
（3）transform:translateZ(800px)translate(30px,30px);
<style>*{margin:0; padding:0;}ul{perspective:400px;width: 500px; margin: auto;}li{width: 200px; height: 80px;background:#f90;margin-bottom:20px;list-style: none;transition: 2s;}ul.translate li:nth-child(1):hover{transform: translate3d(30px ,0, 0);-webkit-transform: translate3d(30px ,0, 0);}ul.translate li:nth-child(2):hover{transform: translate3d(0 ,30px, 0);-webkit-transform: translate3d(0 ,30px, 0);}ul.translate li:nth-child(3):hover{transform: translate3d(0 ,0, 30px);-webkit-transform: translate3d(0 ,0, 30px);}
</style>
</head>
<body><ul class="translate"><li>水平X平移translate3d(30px ,0,0)
</li><li>Y平移
</li><li>Z平移
</li></ul>
</body>
5. 3D縮放
（1）scaleZ
（2）父框設置：
<style>div{perspective:1200px;transform-style:preserve-3D;transform-origin:left/top/right/bottom;}
</style>
三、3D動畫
通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
1. @keyframes
@keyframes 規則用于創建動畫；具體查看 w3c-css動畫。
（1）使用方法：
在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
<style>@ keyframes 自定義名稱1{from {background: yellow;}to {background: green;}to {background: red;}}@-moz-keyframes 自定義名稱2{{from {background: red;}to {background: yellow;}to {background: blue;}}
</style>
（2）兼容：
① IExplorer 10、Firefox 以及 Opera 支持@keyframes；
② Internet Explorer 9，以及更早的版本，不支持 @keyframes 規則或 animation 屬性。
（3）注意：
① 當您在 @keyframes 中創建動畫時，請把它捆綁到某個選擇器的動畫屬性上，否則不會產生動畫效果。
② 通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器動畫屬性：規定動畫的名稱、規定動畫的時長。（即 animation 和它的兩個屬性值）
（4）示例：
<style>div{width: 600px; height: 500px; border:2px solid #000;position: relative;}p{width: 100px; height: 100px; background: #f99; animation: move 2s 1s;position: absolute;}@keyframes move{ 0%{left: 0; top: 0;}100%{left: 500px; top: 0;}}
</style>
<body><div><p></p></div>
</body>
2. 動畫屬性animation
animation，可以理解為循環過度動畫效果，它是所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。。更多參考 w3c-animation。
（1）animation-name，動畫名（必要）；
（2）animation-duration，時間，默認0；
（3）animation-timing-function，曲線，默認ease，勻速linear（除了w3c給的幾個值以外，還有step-end與step-start）；
（4）animation-delay，延時，默認0；
（5）animation-iteration-count，播放次數，默認1，無限infinte；
（6）animation-direction，周期后是否倒放，默認normal，倒放alternate；
（7）animation-play-state，是否暫停 paused，默認 running；
（8）animation-fill-mode，動畫結束后的狀態，默認none，當動畫完成后保持最后一幀forwards；當無限播放時，該屬性失效。
案例示范：
<style>*{margin:0; padding:0;}div{width: 600px; height: 500px; border:2px solid #000;position: relative;}p{width: 100px; height: 100px; background: #f99; animation: move 2s 1s linear 3 alternate;position: absolute;}p:hover{animation-play-state: paused;}@keyframes move{0%{left: 0; top: 0;}50%{left: 500px; top: 0;}100%{left: 500px; top: 400px;}}
</style>
<body><div><p></p></div>
</body>
總結
以上是生活随笔為你收集整理的html笔记（五）2D、3D、3D动画的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
