一、rotate
2d旋轉(zhuǎn)指的是讓元素在2維平面內(nèi)順時針旋轉(zhuǎn)或者逆時針旋轉(zhuǎn)
使用步驟：
- 給元素添加轉(zhuǎn)換屬性
transform - 屬性值為
rotate(角度)如transform:rotate(30deg)順時針方向旋轉(zhuǎn)30度
div{
transform: rotate(0deg);
}
二、三角
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #f20200;
}
div::after {
width: 10px;
height: 10px;
content: '';
position: absolute;
top: 10px;
right: 15px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
transition: all 0.3s;
}
div:hover::after {
transform: rotate(225deg);
}
</style>
二、設(shè)置元素旋轉(zhuǎn)中心點(diǎn)(transform-origin)
-
transform-origin基礎(chǔ)語法
transform-origin: x y;
- 重要知識點(diǎn)
- 注意后面的參數(shù) x 和 y 用空格隔開
- x y 默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心 (50% 50%)，等價于
centercenter - 還可以給 x y 設(shè)置像素或者方位名詞(
top、bottom、left、right、center)
三、2D 轉(zhuǎn)換之 scale
-
scale的作用- 用來控制元素的放大與縮小
-
語法
transform: scale(x, y) -
知識要點(diǎn)
- 注意，x 與 y 之間使用逗號進(jìn)行分隔
-
transform: scale(1, 1): 寬高都放大一倍，相當(dāng)于沒有放大 -
transform: scale(2, 2): 寬和高都放大了二倍 -
transform: scale(2): 如果只寫了一個參數(shù)，第二個參數(shù)就和第一個參數(shù)一致 -
transform:scale(0.5, 0.5): 縮小 -
scale最大的優(yōu)勢：可以設(shè)置轉(zhuǎn)換中心點(diǎn)縮放，默認(rèn)以中心點(diǎn)縮放，而且不影響其他盒子
-
代碼
div:hover { /* 注意，數(shù)字是倍數(shù)的含義，所以不需要加單位 */ /* transform: scale(2, 2) */ /* 實現(xiàn)等比縮放，同時修改寬與高 */ /* transform: scale(2) */ /* 小于 1 就等于縮放*/ transform: scale(0.5, 0.5) }
四、圖片放大
- 代碼
六、分頁按鈕
- 代碼
七、 2D 轉(zhuǎn)換綜合寫法以及順序問題
- 要點(diǎn)
- 同時使用多個轉(zhuǎn)換，其格式為
transform: translate() rotate() scale() - 順序會影響到轉(zhuǎn)換的效果(先旋轉(zhuǎn)會改變坐標(biāo)軸方向)
- 但我們同時有位置或者其他屬性的時候，要將位移放到最前面
- 代碼
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
八、 動畫(animation)
-
什么是動畫
- 動畫是
CSS3中最具顛覆性的特征之一，可通過設(shè)置多個節(jié)點(diǎn)來精確的控制一個或者一組動畫，從而實現(xiàn)復(fù)雜的動畫效果
- 動畫是
-
動畫的基本使用
- 先定義動畫
- 在調(diào)用定義好的動畫
-
語法格式(定義動畫)
@keyframes 動畫名稱 { 0% { width: 100px; } 100% { width: 200px } }
- 語法格式(使用動畫)
div {
/* 調(diào)用動畫 */
animation-name: 動畫名稱;
/* 持續(xù)時間 */
animation-duration: 持續(xù)時間；
}
-
動畫序列
- 0% 是動畫的開始，100 % 是動畫的完成，這樣的規(guī)則就是動畫序列
- 在 @keyframs 中規(guī)定某項 CSS 樣式，就由創(chuàng)建當(dāng)前樣式逐漸改為新樣式的動畫效果
- 動畫是使元素從一個樣式逐漸變化為另一個樣式的效果，可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)
- 用百分比來規(guī)定變化發(fā)生的時間，或用
from和to，等同于 0% 和 100%
-
代碼
<style> div { width: 100px; height: 100px; background-color: aquamarine; animation-name: move; animation-duration: 0.5s; } @keyframes move{ 0% { transform: translate(0px) } 100% { transform: translate(500px, 0) } } </style>
九、動畫序列
- 代碼
十、動畫常見屬性
-
常見的屬性
-
代碼
div { width: 100px; height: 100px; background-color: aquamarine; /* 動畫名稱 */ animation-name: move; /* 動畫花費(fèi)時長 */ animation-duration: 2s; /* 動畫速度曲線 */ animation-timing-function: ease-in-out; /* 動畫等待多長時間執(zhí)行 */ animation-delay: 2s; /* 規(guī)定動畫播放次數(shù) infinite: 無限循環(huán) */ animation-iteration-count: infinite; /* 是否逆行播放 */ animation-direction: alternate; /* 動畫結(jié)束之后的狀態(tài) */ animation-fill-mode: forwards; } div:hover { /* 規(guī)定動畫是否暫?；蛘卟シ?*/ animation-play-state: paused; }
十一、 動畫簡寫方式
- 動畫簡寫
/* animation: 動畫名稱 持續(xù)時間 運(yùn)動曲線 何時開始 播放次數(shù) 是否反方向 起始與結(jié)束狀態(tài) */
animation: name duration timing-function delay iteration-count direction fill-mode
- 要點(diǎn)
- 簡寫屬性里面不包含
animation-paly-state - 暫停動畫
animation-paly-state: paused; 經(jīng)常和鼠標(biāo)經(jīng)過等其他配合使用 - 要想動畫走回來，而不是直接調(diào)回來：
animation-direction: alternate - 盒子動畫結(jié)束后，停在結(jié)束位置：
animation-fill-mode: forwards
-
代碼
animation: move 2s linear 1s infinite alternate forwards;
十二、速度曲線細(xì)節(jié)
-
速度曲線細(xì)節(jié)
-
animation-timing-function: 規(guī)定動畫的速度曲線，默認(rèn)是ease
-
-
代碼
div { width: 0px; height: 50px; line-height: 50px; white-space: nowrap; overflow: hidden; background-color: aquamarine; animation: move 4s steps(24) forwards; } @keyframes move { 0% { width: 0px; } 100% { width: 480px; } }
