日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > CSS >内容正文

CSS

十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列

發布時間：2024/7/5 CSS 32 豆豆
生活随笔 收集整理的這篇文章主要介紹了 十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML5 第二天

一、rotate

2d旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉

使用步驟：

  • 給元素添加轉換屬性 transform
  • 屬性值為 rotate(角度) 如 transform:rotate(30deg) 順時針方向旋轉30度
    • div{transform: rotate(0deg); }
    二、三角
    <!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)
  • transform-origin 基礎語法
    • transform-origin: x y;
  • 重要知識點
    • 注意后面的參數 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);}
    • 五、圖片放大案例
    • 代碼演示
    <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {overflow: hidden;float: left;margin: 10px;}div img {transition: all .4s;vertical-align: middle; /* 必須加上這句 代碼，因為img 圖片默認是基線對齊，把它修改成中線對齊，才能實現放大后的圖片不會超出原本的div的高度 */}div img:hover {transform: scale(1.1);}</style> </head><body><div><a href="#"><img src="media/scale.jpg" alt=""></a></div><div><a href="#"><img src="media/scale.jpg" alt=""></a></div><div><a href="#"><img src="media/scale.jpg" alt=""></a></div> </body></html>
    六、分頁按鈕案例
    • 代碼演示
    <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>li {float: left;width: 30px;height: 30px;border: 1px solid pink;margin: 10px;text-align: center;line-height: 30px;list-style: none;border-radius: 50%;cursor: pointer;transition: all .4s;}li:hover {transform: scale(1.2);}</style> </head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul> </body></html>

    七、 2D 轉換綜合寫法以及順序問題

  • 知識要點

  • 同時使用多個轉換，其格式為 transform: translate() rotate() scale()

  • 順序會影響到轉換的效果(先旋轉會改變坐標軸方向)

  • 但我們同時有位置或者其他屬性的時候，要將位移放到最前面

  • 代碼演示

    • div:hover {transform: translate(200px, 0) rotate(360deg) scale(1.2) }

    2D轉換總結：

  • 轉換transform我們簡單理解就是變形有2D和3D之分 .我們暫且學了三個分別足位移旋轉和縮放
  • 2D移動translate（x，y）最大的優勢足不影響其他盒子，里面參數用%，是相對于自身寬度和高度來計算的
  • 可以分開寫比如translateX（x）和translateY（y）
  • ·2D旋轉rotate（度數）可以實現旋轉元素廢數的單位是deg
  • 2D縮放 sacle（x，y）里面參數是數字不跟單位，可以是小數，最大的優勢不影響其他盒子
  • 設置轉換中心點traisform-origin:xy；參數可以百分比、像素或者是方位名詞
  • 當我們進行綜合寫法，同時有位移和其他屬性的時候，記得要將位移放到最前
    • 八、 動畫(animation)

  • 什么是動畫

    • 動畫是 CSS3 中最具顛覆性的特征之一，可通過設置多個節點來精確的控制一個或者一組動畫，從而實現復雜的動畫效果

  • 動畫的基本使用

    • 先定義動畫
    • 在調用定義好的動畫

  • 語法格式(定義動畫)

    寫法一： @keyframes 動畫名稱 {0% {width: 100px;}100% {width: 200px} }
    • 寫法二： ```html@keyframes move{from {transform: translate(0px,0px);}to {transform: translate(200px,200px);}} 4. 語法格式(使用動畫)

    div {
    /* 調用動畫 /
    animation-name: 動畫名稱;
    / 持續時間 */
    animation-duration: 持續時間；
    }

    5. 動畫序列- 0% 是動畫的開始，100 % 是動畫的完成，這樣的規則就是動畫序列 - 在 @keyframs 中規定某項 CSS 樣式，就由創建當前樣式逐漸改為新樣式的動畫效果 - 動畫是使元素從一個樣式逐漸變化為另一個樣式的效果，可以改變任意多的樣式任意多的次數 - 用百分比來規定變化發生的時間，或用 `from` 和 `to`，等同于 0% 和 100%6. 代碼演示```css <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>
    九、動畫序列
    • 代碼演示:
    <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* from to 等價于 0% 和 100% *//* @keyframes move {from {transform: translate(0, 0);}to {transform: translate(1000px, 0);}} *//* 動畫序列 *//* 1. 可以做多個狀態的變化 keyframe 關鍵幀 *//* 2. 里面的百分比要是整數 *//* 3. 里面的百分比就是 總的時間（我們這個案例10s）的劃分 25% * 10 = 2.5s */@keyframes move {0% {transform: translate(0, 0);}25% {transform: translate(1000px, 0)}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500px);}100% {transform: translate(0, 0);}}div {width: 100px;height: 100px;background-color: pink;animation-name: move;animation-duration: 10s;}</style> </head><body><div></div> </body></html>
    十、動畫常見屬性

  • 常見的屬性

    ?

  • 代碼演示

    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: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 起始與結束狀態 */ animation: name duration timing-function delay iteration-count direction fill-mode
  • 知識要點
    • 簡寫屬性里面不包含 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;} }
    • 十三、奔跑的熊大
  • 代碼演示
    • <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {background-color: #ccc;} div {position: absolute;width: 200px;height: 100px;background: url(media/bear.png) no-repeat;/* 我們元素可以添加多個動畫， 用逗號分隔 */animation: bear .4s steps(8) infinite, move 3s forwards;}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes move {0% {left: 0;}100% {left: 50%;/* margin-left: -100px; */transform: translateX(-50%);}}</style> </head><body><div></div> </body></html> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

    總結

    以上是生活随笔為你收集整理的十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。