天天看點
傳回

css3動畫效果屬性

文章目錄

    • border-radiu
    • transition
    • transform
    • animation
    • sprite

border-radiu

  作用是為 div 元素添加圓角邊框;border-radius屬性其實是由border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四個屬性組合而成,它有三種表示方法，分别是px;%,em.

  它的設定順序為:border-radius：左上角、右上角、右下角、左下角。也可以隻用一個值，表示所有的角都使用這個值。

  *注:在設定對象為圓形的時候，如果使用了border、padding等情況時，對象的實際顯示寬高已經不再是設定的width和height的數值，如果border-radius設定的值仍為原本的width和height的一半，可能達不到預期的真正的圓形的效果。

transition

  給對象添加一些動畫互動效果，使過渡更自然。

  過渡transition是一個複合屬性，它包含四個屬性:

  • transition-property: 過渡屬性(預設值為all)
  • transition-duration:過渡持續時間(預設值為0s)
  • transiton-timing-function: 過渡函數(預設值為ease函數)

  • transition-delay: 過渡延遲時間(預設值為0s)

    如果綜合使用過渡會讓網頁更生動有趣，富有互動性。

    transition經常和hover使用，表示當滑鼠滑鼠移動上去來擁有對應的效果。可以和transform此類變形屬性混合使用。

  • https://www.cnblogs.com/xiaohuochai/p/5347930.html深入了解

transform

  用于元素的2D或3D轉換。這個屬性允許你将元素旋轉，縮放，移動，傾斜

  文法一般為: transform: none|transform-functions;

常用的值有

值 屬性
none 定義不進行轉換。
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y) 定義 2D 轉換。
translate3d(x,y,z) 定義 3D 轉換。
translateX(x) 定義轉換，隻是用 X 軸的值。
translateY(y) 定義轉換，隻是用 Y 軸的值。
translateZ(z) 定義 3D 轉換，隻是用 Z 軸的值。
scale(x[,y]?) 定義 2D 縮放轉換。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 通過設定 X 軸的值來定義縮放轉換。
scaleY(y) 通過設定 Y 軸的值來定義縮放轉換。
scaleZ(z) 通過設定 Z 軸的值來定義 3D 縮放轉換。
rotate(angle) 定義 2D 旋轉，在參數中規定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿着 X 軸的 3D 旋轉。
rotateY(angle) 定義沿着 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿着 Z 軸的 3D 旋轉。
skew(x-angle,y-angle) 定義沿着 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle) 定義沿着 X 軸的 2D 傾斜轉換。
skewY(angle) 定義沿着 Y 軸的 2D 傾斜轉換。
perspective(n) 為 3D 轉換元素定義透視視圖。

 *如果想更準确的了解transform，可以在https://www.cnblogs.com/zero-zm/p/9911657.html檢視

如果将過渡和變形混合使用，就可以做到如下。

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="one.css" target="_blank" rel="external nofollow" >
    <title>過渡</title>
</head>
<body>
    <div class="one">
        <div class="first">
            <span>變圓</span>
            <img src="images/1.jpeg" >
        </div>
        <div class="second">
            <span >放大</span>
            <div class="gu">
            <img src="images/2.jpeg" >
            </div>

        </div>
        <div class="third">
            <span>旋轉</span>
            <img src="images/3.jpeg" >
        </div>
        <div class="fourth">
            <span>掉色</span>
            <img src="images/4.jpeg ">
        </div>
    </div>
</body>
</html>

css屬性如下

body{
    background-color: #000000;
    padding: 40px;
}
.one{
    display: flex;
    justify-content: space-between;

}
.first,.second,.third,.fourth{
    display: flex;
    color: white;
    flex-direction: column;
}
span{
    text-align: center;
}
img{
    margin-top: 20px;
    width: 200px;
    height: 200px;
    border: 8px solid #ffffff;
    border-radius:10px ;
    transition: all 3s ;
}
.first img:hover {
    border-radius: 50%;
    box-shadow: 0 0 20px 5px #ffffff;
}
.gu{
    margin-top: 20px;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 8px solid #ffffff;
    display: inline-block;
    border-radius:10px ;
    transition: all 3s;
}
.second img{
    margin-top: 0;
    border: 0px;
    border-radius:0 ;
}
.second img:hover{
    transform: scale(2);
}
.gu:hover{
     box-shadow: 0 0 20px 5px #ffffff;
 }
.third img:hover{
    transform: rotate(3600deg);
    box-shadow: 0 0 20px 5px #ffffff;
}
.fourth img:hover{
    box-shadow: 0 0 20px 5px #ffffff;
    filter: grayscale(1);

}

animation

  為對象設定動畫，animation文法為:

  animation: name duration timing-function delay iteration-count direction fill-mode play-state;

  它由六個動畫屬性組成

  • animation-name 指定要綁定到選擇器的關鍵幀的名稱
  • animation-duration 指定動畫完成所需的秒數或毫秒數
  • animation-timing-function 指定動畫的速度曲線
  • animation-delay 指定動畫開始之前的延遲
  • animation-iteration-count 指定應播放動畫的次數
  • animation-direction指定動畫是否應在交替循環中反向播放
  • animation-fill-mode 指定動畫在執行之外應用的值
  • animation-play-state 指定動畫是運作還是暫停

  和animation息息相關的的屬性是@keyframes；用來建立動畫，文法為

@keyframes animationname {keyframes-selector {css-styles;}};

keyframes-selector：動畫持續時間的百分比，可能的值：0-100%、from (和0%相同)、to (和100%相同)。您可以用一個動畫keyframes-selectors；

指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同，0％是開頭動畫，100％是當動畫完成;例如:

@keyframes go {
　　0% {}
　　50%{}
　　100%{}
}

  *兩者結合使用可以完各種動畫操作。

sprite

允許你将一個頁面涉及到的所有零星圖檔都包含到一張大圖中去；好處是，當通路該頁面時，載入的圖檔就不會像以前那樣一幅一幅地慢慢顯示出來了。這在網速不快的年代經常使用。

CSS Sprites非常值得學習和應用，特别是頁面有很多很小的icon（圖示）。

優點

  • CSS Sprites能很好地減少網頁的http請求，進而大大的提高頁面的性能，這是CSS

    Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；

  • CSS Sprites能減少圖檔的位元組；曾經比較過多次3張圖檔合并成1張圖檔的位元組總是小于這3張圖檔的位元組總和。

  • CSSSprites解決了網頁設計師在圖檔命名上的困擾，隻需對一張集合的圖檔命名，不需要對每一個小圖檔進行命名，進而提高了網頁制作效率。

    -CSSSprites隻需要修改一張或少張圖檔的顔色或樣式來改變整個網頁的風格。

缺點

  • 圖檔合并麻煩：圖檔合并時，需要把多張圖檔有序的合理的合并成一張圖檔，并留好足夠的空間防止版塊出現不必要的背景。
  • 圖檔适應性差：在高分辨的螢幕下自适應頁面，若圖檔不夠寬會出現背景斷裂。
  • 圖檔定位繁瑣：開發時需要通過工具測量計算每個背景單元的精确位置。

  • 可維護性差：頁面背景需要少許改動，可能要修改部分或整張已合并的圖檔，進而要改動css。在避免改動圖檔的前提下，又隻能（最好）往下追加圖檔，但這樣增加了圖檔位元組。

    一般使用精靈技術，需要配合一些制圖軟體一起使用，小工具有些小工具，

    如“Css Sprite Tools”、“CSS Satyr ”,“iwangx”

    用法有:

　　　.bg_sprite{background-image:url(/整圖位址); background-repeat:no-repeat}
　　　　#ico1 {width:容器寬度;height:容器高度;background-position:X坐标 Y坐标}
　　　　#ico2 {width:容器寬度;height:容器高度;background-position:X坐标 Y坐标}
　　　　#ico3 {width:容器寬度;height:容器高度;background-position:X坐标 Y坐标}
　　　　.nav {width:容器寬度;height:容器高度;background-position:X坐标 Y坐标}
　　當然也有簡寫方法：
　　　　#ico1 {width:容器寬度;height:容器高度;background:url(/整圖位址) no-repeat X坐标 Y坐标;}

*CSS Sprites技術加速的關鍵，并不是降低品質，而是減少個數，當然随之而來的增加記憶體消耗，CSS Sprites圖檔繁瑣的合成等缺點在網站性能的提升前，也就不足為道了。簡單來說就是，現在網速快的情況，精靈技術用處并沒有那麼顯著，但是在一些特定的連接配接上還是有很大作用的。

css html css3 html5
上一篇: CSS3 中的過渡效果
下一篇: CSS3過渡和2D屬性

繼續閱讀