十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列
生活随笔
收集整理的這篇文章主要介紹了
十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML5 第二天
一、rotate
2d旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉
使用步驟：
二、三角
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">.box {position: relative;width: 300px;height: 35px;border: 1px solid #ccc;}.box::after {position: absolute;top: 10px;right: 10px;content: '';width: 10px;height: 10px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;transform: rotate(45deg); /* 旋轉45°,形成往下的箭頭 */transition: all 0.3s;/* 旋轉的時候產生過渡效果 */}/* 鼠標經過box盒子時,讓after偽類生成的箭頭進行旋轉過渡,并重新定位箭頭的位置 */.box:hover::after {transform: rotate(225deg);position: absolute;top: 15px;right: 10px;}</style></head><body><div class="box"></div></body> </html>二、設置元素旋轉中心點(transform-origin)
- 注意后面的參數 x 和 y 用空格隔開
- x y 默認旋轉的中心點是元素的中心 (50% 50%)，等價于 center center
- 還可以給 x y 設置像素或者方位名詞(top、bottom、left、right、center)
三、旋轉中心案例
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>旋轉中心點案例</title><style type="text/css">div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;transition: all 0.4s;/* 1.設置旋轉中心點 transform-origin后面可以跟方位名詞 *//* transform-origin: left bottom; *//* 2.默認的旋轉中心點是 50% 50% 等價于 center center *//* 3.可以是px像素 */transform-origin: 50px 50px;}div:hover {transform: rotate(360deg);}</style></head><body><div></div></body> </html>四、2D 轉換之 scale
scale 的作用
- 用來控制元素的放大與縮小
語法
transform: scale(x, y)知識要點
- 注意，x 與 y 之間使用逗號進行分隔
- transform: scale(1, 1): 寬高都放大一倍，相當于沒有放大
- transform: scale(2, 2): 寬和高都放大了二倍
- transform: scale(2): 如果只寫了一個參數，第二個參數就和第一個參數一致
- transform:scale(0.5, 0.5): 縮小
- scale 最大的優勢：可以設置轉換中心點縮放，默認以中心點縮放，而且不影響其他盒子
代碼演示
div:hover {/* 1.注意，數字是倍數的含義，1就是1倍，所以不需要加單位 。第一個參數為寬度，第二個參數為高度*//* transform: scale(2, 2) *//* 2.實現等比縮放，同時修改寬與高 *//* transform: scale(2) *//* 3.小于 1 就等于縮放*/transform: scale(0.5, 0.5)/* 4. scale 的優勢之處： 不會影響其他的盒子 而且可以設置縮放的中心點*//* width: 300px;height: 300px; */transform: scale(2);}五、圖片放大案例
- 代碼演示
六、分頁按鈕案例
- 代碼演示
七、 2D 轉換綜合寫法以及順序問題
知識要點
同時使用多個轉換，其格式為 transform: translate() rotate() scale()
順序會影響到轉換的效果(先旋轉會改變坐標軸方向)
但我們同時有位置或者其他屬性的時候，要將位移放到最前面
代碼演示
2D轉換總結：
八、 動畫(animation)
什么是動畫
- 動畫是 CSS3 中最具顛覆性的特征之一，可通過設置多個節點來精確的控制一個或者一組動畫，從而實現復雜的動畫效果
動畫的基本使用
- 先定義動畫
- 在調用定義好的動畫
語法格式(定義動畫)
寫法一： @keyframes 動畫名稱 {0% {width: 100px;}100% {width: 200px} }div {
/* 調用動畫 /
animation-name: 動畫名稱;
/ 持續時間 */
animation-duration: 持續時間；
}
九、動畫序列
- 代碼演示:
十、動畫常見屬性
常見的屬性
?
代碼演示
div {width: 100px;height: 100px;background-color: aquamarine;/* 動畫名稱 */animation-name: move;/* 動畫花費時長 */animation-duration: 2s;/* 動畫速度曲線 */animation-timing-function: ease-in-out;/* 動畫等待多長時間執行 */animation-delay: 2s;/* 規定動畫播放次數 infinite: 無限循環 */animation-iteration-count: infinite;/* 是否逆行播放 */animation-direction: alternate;/* 動畫結束之后的狀態 */animation-fill-mode: forwards; }div:hover {/* 規定動畫是否暫停或者播放 */animation-play-state: paused; }十一、 動畫簡寫方式
- 簡寫屬性里面不包含 animation-paly-state
- 暫停動畫 animation-paly-state: paused; 經常和鼠標經過等其他配合使用
- 要想動畫走回來，而不是直接調回來：animation-direction: alternate
- 盒子動畫結束后，停在結束位置：animation-fill-mode: forwards
代碼演示
animation: move 2s linear 1s infinite alternate forwards;十二、速度曲線細節
速度曲線細節
- animation-timing-function: 規定動畫的速度曲線，默認是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;} }十三、奔跑的熊大
總結
以上是生活随笔為你收集整理的十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python脚本加密_教你如何基于pyt
- 下一篇： 八、PHP框架Laravel学习笔记——