CSS 新增 2D|3D屬性|動畫

 本文內容概覽:

  • transition:過渡
  • transform 
    • 2D變形
      • translate(x,y):移動
      • scale(x,y):縮放
      • rotate(deg):旋轉
      • transform-origin:調整元素轉換變形的 原點
      • skew(deg,deg):傾斜
    • 3D變形
      • rotateX()
      • rotateY()
      • rotateZ()
      • 透視(perspective)
      • translateX(x)
      • translateY(y)
      • translateZ(z)
      • translate3d(x, y, z)
      • backface-visibility
  • animation:動畫

 

過渡(CSS3)transition

  • 在CSS3中使用 transition 可以實現補間動畫(過渡效果);並且當前元素只要有“屬性”發生變化時都會存在兩種狀態。
  • 比如:將寬度爲 width=100px,高度爲height=50px 的盒子 變爲 width = 200px的盒子時;由於刷新頁面時,變化的過於突兀,因此便可用transition實現過渡效果;

 transition語法格式

transition:要過渡的屬性  花費時間  運動曲線  何時開始;
/* 如果有多組屬性變化時,還是用逗號隔開;一般只需要前面兩個屬性即可 */

/* 以上示例代碼如下 */
transition: width 0.5s;


/* 如果高度也發生變化時 */
transition: width 0.5s, height 0.5s;

transition屬性值:

 

 

transform:實現2D|3D效果

2D變形(CSS3)transform

定位的盒子居中對齊的完美寫法

  • 優於之前寫的 絕對定位水平垂直居中 讓盒子水平垂直居中的寫法;
  • transform:translate(水平 50%,垂直 50%)以百分比(%)爲單位時;
/* translate:移動距離,如果是 %,則以自身寬度爲準 */
transform: translate(50%,50%);
position: absolute;
left:50%;
top:50%;
/* 需要計算,並不適用 */
/* margin-left: 盒子寬度的一半 px; */
/* margin-top: 盒子高度的一半 px */
transform: translate(-50%,-50%);

設置變形中心點

 

transform-origin:可以調整元素轉換變形的原點;

/* 改變元素的原點,可以是盒子的任意位置;left top是以左上角爲原點;*/
transform-origin: left top;
/* 如果是四個角可以用left、top、right、bottom,但是想要精確的位置,可以用 px 像素 */
transform-origin: 10px 20px;
/* rotate():單位是 deg 度數  */
transform: rotate(45deg);

 

3D變形(CSS3)transform

 左手法則:分別以X(rotateX)、Y(rotateY)、Z(rotateZ)軸爲中心進行旋轉

/* 以 X 軸 爲中心旋轉*/
transform: rotateX();
/* 以 Y 軸 爲中心旋轉*/
transform: rotateY();
/* 以 Z 軸 爲中心旋轉*/
transform: rotateZ();

透視

  • 透視距離原理:近大遠小
  • perspective:視距,表示視點距離屏幕的長短;視點,用於模擬人眼的位置
  • perspective 一般作爲一個屬性,設置給父元素,作用於所有3D轉換的子元素

 示例:

 <!DOCTYPE html>
 <html lang="en">
 <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
           body {
                /* 
                視距:perspective;
                視距越大,效果越不明顯;
                視距越小,效果越明顯;
                 */
                perspective: 300px;
           }
           img {
                margin: 100px;
                width: 200px;
                /* 過渡 */
                transition: all 5s;
                /* 設置變形中心點 */
                transform-origin: left;
           }
           img:hover {
               /* 設置3D變形 */
                transform: rotateY(80deg);
           }
      </style>
 </head>
 <body>
      <img src="../../../assets/images/yangzi.jpeg">
 </body>
 </html>
View Code

頁面效果如下:

 

 

 綜合寫法:

/* 
     x,y 軸的單位可以是 px 也可以是 %
     但是 z 軸只能是 px
*/
transform: translate3d(x, y, z);

 

動畫

  • 可以通過設置多個節點來精確控制一個或一組動畫,常用來實現複雜的動畫效果;
  • 語法格式如下:
/*animation: 動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向 動畫之外的狀態; */
animation: name duration timing-function delay iteration-count direction fill-mode;
  • 動畫屬性

 

示例

<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
          img {
               width: 200px;
               /* 
                    purpleYang:動畫名稱
                    3s: 動畫時間
                    2:循環次數,默認是1次
                    infinite:無限循環(循環次數)
                    alternate: 反方向開始

                    一般情況下,默認只寫 動畫名稱 和 動畫時間 即可;
               */
               animation: purpleYang 3s 0s infinite alternate;
          }

          /* 
               @keyframes: 規定動畫
               purpleYang:引用選擇器中設置的 動畫名稱
               from{} to{}:起始位置 --> 結束位置

               from--to 也可以用百分比代替:0%(相當於起始位置);100%(相當於結束位置)

               0% {
                    transform: translate3d(0, 0, 0);
               }
               25% {
                    transform: translate3d(600px, 0 ,0);
               }
               50% {
                    transform: translate3d(600px, 400px ,0);
               }
               75% {
                    transform: translate3d(0, 400px ,0);
               }
               100% {
                    transform: translate3d(0, 0 ,0);
               }
          */
          @keyframes purpleYang {
               from {
                    transform: translateX(0);
               }

               to {
                    transform: translateX(600px);
               }
          }
     </style>
</head>

<body>
     <img src="../../../assets/images/yangzi.jpeg">
</body>

</html>

頁面效果:圖片在水平方向從0px 到 600px 來回滑動;

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章