CSS3新增2

一域庇、rotate

2d旋轉(zhuǎn)指的是讓元素在2維平面內(nèi)順時(shí)針旋轉(zhuǎn)或者逆時(shí)針旋轉(zhuǎn)

使用步驟:

  1. 給元素添加轉(zhuǎn)換屬性 transform
  2. 屬性值為 rotate(角度)transform:rotate(30deg) 順時(shí)針方向旋轉(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)
  1. transform-origin 基礎(chǔ)語法
transform-origin: x y;
  1. 重要知識點(diǎn)
  • 注意后面的參數(shù) x 和 y 用空格隔開
  • x y 默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心 (50% 50%)劫映,等價(jià)于 center center
  • 還可以給 x y 設(shè)置像素或者方位名詞(top诡必、bottom吭产、left格二、rightcenter)
三齿诉、2D 轉(zhuǎn)換之 scale
  1. scale 的作用

    • 用來控制元素的放大與縮小
  2. 語法

    transform: scale(x, y)
    
  3. 知識要點(diǎn)

    • 注意筝野,x 與 y 之間使用逗號進(jìn)行分隔
    • transform: scale(1, 1): 寬高都放大一倍,相當(dāng)于沒有放大
    • transform: scale(2, 2): 寬和高都放大了二倍
    • transform: scale(2): 如果只寫了一個(gè)參數(shù)粤剧,第二個(gè)參數(shù)就和第一個(gè)參數(shù)一致
    • transform:scale(0.5, 0.5): 縮小
    • scale 最大的優(yōu)勢:可以設(shè)置轉(zhuǎn)換中心點(diǎn)縮放歇竟,默認(rèn)以中心點(diǎn)縮放,而且不影響其他盒子
  4. 代碼

       div:hover {
           /* 注意抵恋,數(shù)字是倍數(shù)的含義焕议,所以不需要加單位 */
           /* transform: scale(2, 2) */
       
           /* 實(shí)現(xiàn)等比縮放,同時(shí)修改寬與高 */
           /* transform: scale(2) */
       
           /* 小于 1 就等于縮放*/
           transform: scale(0.5, 0.5)
       }
    
四弧关、圖片放大
  • 代碼
六盅安、分頁按鈕
  • 代碼
七、 2D 轉(zhuǎn)換綜合寫法以及順序問題
  1. 要點(diǎn)
  • 同時(shí)使用多個(gè)轉(zhuǎn)換世囊,其格式為 transform: translate() rotate() scale()
  • 順序會影響到轉(zhuǎn)換的效果(先旋轉(zhuǎn)會改變坐標(biāo)軸方向)
  • 但我們同時(shí)有位置或者其他屬性的時(shí)候别瞭,要將位移放到最前面
  1. 代碼
div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
八、 動畫(animation)
  1. 什么是動畫

    • 動畫是 CSS3 中最具顛覆性的特征之一株憾,可通過設(shè)置多個(gè)節(jié)點(diǎn)來精確的控制一個(gè)或者一組動畫蝙寨,從而實(shí)現(xiàn)復(fù)雜的動畫效果
  2. 動畫的基本使用

    • 先定義動畫
    • 在調(diào)用定義好的動畫
  3. 語法格式(定義動畫)

    @keyframes 動畫名稱 {
        0% {
            width: 100px;
        }
        100% {
            width: 200px
        }
    }
    
  1. 語法格式(使用動畫)
div {
 /* 調(diào)用動畫 */
    animation-name: 動畫名稱;
     /* 持續(xù)時(shí)間 */
     animation-duration: 持續(xù)時(shí)間;
}
  1. 動畫序列

    • 0% 是動畫的開始,100 % 是動畫的完成籽慢,這樣的規(guī)則就是動畫序列
    • 在 @keyframs 中規(guī)定某項(xiàng) CSS 樣式浸遗,就由創(chuàng)建當(dāng)前樣式逐漸改為新樣式的動畫效果
    • 動畫是使元素從一個(gè)樣式逐漸變化為另一個(gè)樣式的效果,可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)
    • 用百分比來規(guī)定變化發(fā)生的時(shí)間箱亿,或用 fromto跛锌,等同于 0% 和 100%
  2. 代碼

    <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>
    
九、動畫序列
  • 代碼
十届惋、動畫常見屬性
  1. 常見的屬性


  2. 代碼

    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      /* 動畫名稱 */
      animation-name: move;
      /* 動畫花費(fèi)時(shí)長 */
      animation-duration: 2s;
      /* 動畫速度曲線 */
      animation-timing-function: ease-in-out;
      /* 動畫等待多長時(shí)間執(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;
    }
    
十一、 動畫簡寫方式
  1. 動畫簡寫
/* animation: 動畫名稱 持續(xù)時(shí)間 運(yùn)動曲線 何時(shí)開始 播放次數(shù) 是否反方向 起始與結(jié)束狀態(tài) */
animation: name duration timing-function delay iteration-count direction fill-mode
  1. 要點(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
  1. 代碼

    animation: move 2s linear 1s infinite alternate forwards;
    
十二、速度曲線細(xì)節(jié)
  1. 速度曲線細(xì)節(jié)

    • animation-timing-function: 規(guī)定動畫的速度曲線瘩欺,默認(rèn)是ease
  2. 代碼

    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;
      }
    }
    
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末必盖,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子俱饿,更是在濱河造成了極大的恐慌歌粥,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拍埠,死亡現(xiàn)場離奇詭異失驶,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)枣购,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門嬉探,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人棉圈,你說我怎么就攤上這事涩堤。” “怎么了迄损?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵定躏,是天一觀的道長账磺。 經(jīng)常有香客問我芹敌,道長,這世上最難降的妖魔是什么垮抗? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任氏捞,我火速辦了婚禮,結(jié)果婚禮上冒版,老公的妹妹穿的比我還像新娘液茎。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布捆等。 她就那樣靜靜地躺著滞造,像睡著了一般。 火紅的嫁衣襯著肌膚如雪栋烤。 梳的紋絲不亂的頭發(fā)上谒养,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天,我揣著相機(jī)與錄音明郭,去河邊找鬼买窟。 笑死,一個(gè)胖子當(dāng)著我的面吹牛薯定,可吹牛的內(nèi)容都是我干的始绍。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼话侄,長吁一口氣:“原來是場噩夢啊……” “哼亏推!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起年堆,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤径簿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后嘀韧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體篇亭,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年锄贷,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了译蒂。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,654評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡谊却,死狀恐怖柔昼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情炎辨,我是刑警寧澤捕透,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站碴萧,受9級特大地震影響乙嘀,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜破喻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一虎谢、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧曹质,春花似錦婴噩、人聲如沸擎场。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽迅办。三九已至,卻和暖如春章蚣,著一層夾襖步出監(jiān)牢的瞬間礼饱,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工究驴, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留镊绪,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓洒忧,卻偏偏與公主長得像蝴韭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子熙侍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評論 2 349