CSS3_過渡_2D 變換_瓶體旋轉_動態時鐘

時間 2019-11-08

標籤 css3 css 過渡 2d 變換旋轉動態時鐘欄目 CSS 简体版

原文原文鏈接

1. 過渡 transitionjavascript

容許 CSS 的屬性值在必定時間內平滑的過渡，css

在鼠標點擊，鼠標滑過或對屬性改變中觸發，並圓滑的改變 CSS 的屬性值html

簡寫屬性：java

#box {
    width: 300px;
    height: 200px;
    background-color: red; transition: property timing-function duration delay;
}
    /* 沒有順序限制 可是必須先寫 過渡，再寫 延遲 即 先寫 duration ， 再寫 delay transition: 1s; 等同於 trasition: 1s all ease 0; */


#box:hover {
    width: 200px;
    height: 300px;
    background-color: blue;
}

transition-property
- 定義：設置對象的參與過渡的屬性，或者說要監測的屬性
  - ```
  transition-property: width;
```
- 可選值：
  - all 默認值，全部屬性都改變
  - none 沒有屬性改變
  - property 元素的屬性名

transition-duration
- 定義：設置過渡效果須要花費的事件，以秒/毫秒計算
  - ```
  transition-duration: 1s;
  transition-duration: 1000ms;
```
- 默認值： 0

transition-timing-function
- 定義：設置過渡的動畫類型（只能使用一種類型）
  - ease 默認值，平滑過渡（慢-快-慢）cubic-bezier(0.25, 0.1, 0.25, 1)
  - linear 線性過渡（勻速） cubic-bezier(0, 0, 1, 1)
    - transition-timing-function: 貝塞爾曲線;
    - transition-timing-function: cubic-bezier(.17,.67,.82,.35);
  - ease-in 慢-快 cubic-bezier(0.42, 0, 1, 1)
  - ease-out 快-慢 cubic-bezier(0, 0, 0.58, 1)
  - ease-in-out 慢-快-慢 cubic-bezier(0.42, 0, 0.58, 1) 相較於ease 的幅度更大

transition-delay
- 定義：設置延遲的過渡時間，指定等待 1s/1000ms 再開始過渡動畫。
- 默認值： 0

過渡樣式的位置
- 放在原來樣式中
  - 鼠標懸浮於鼠標離開，都有過渡效果
- 放在新的樣式中
  - 只有鼠標懸浮時有效果，鼠標離開時無效果

多屬性過渡，需求： 3s 延遲後 width 變成 300px，再延遲 1s 後 background-color 變成 red

使用逗號隔開兩個過渡參數

#box {
    width: 300px;
    height: 200px;
    background-color: red;
    transition: 2s 3s width linear, background 2s linear;
}
    /* （面試題） transition: width 3s linear 2s, 2s; // 不會有延遲 2s，馬上執行 3s 勻速過渡動畫 （1）過渡的覆蓋問題，至關於： transition: all 2s ease 0s;  */

js 實現頁面加載時過渡
- （2）DOM 頁面沒有渲染完，過渡是不生效的，即 js 代碼執行了，纔開始監控屬性
  - 元素渲染完，過渡才生效
  - 解決方案：
    - 1. 使用 window.setTimeout() 來保證元素渲染完。
    - 2. window.onload(); 保證外部全部資源加載完。

（3）並非全部的屬性都能加過渡
- 就看元素的變化，有沒有中間的過程
- 元素有無到有的過渡，使用 opacity: 0→1; ，而不能使用 display: none→block;

幽靈邊框

/************** 幽靈邊框 ***************/
.ghost_border {
    position: relative;
    top: 0px;
    left: 0px;
}

.ghost_border::before, 
.ghost_border::after {
    content:"";
    
    position: absolute;
    display: block;
    width: 0;
    height: 20%;
    background-color: olive;
    transition: 1s all ease 0s;
}

.ghost_border::before {
    top: 0;
    left: 0;
}

.ghost_border::after {
    bottom: 0;
    right: 0;
}

body .ghost_border:hover::before,
body .ghost_border:hover::after {
    width: 100%;
}

2. 2D 變換面試

（面試題）display: inline 元素不支持 transform：即不支持 2D 變換，也不支持 3D變換app

儘管元素外形發生變化，其在文檔流的位置不變。即不影響周圍元素佈局佈局

旋轉 rotate(0deg)
- 定義：經過制定一個角度，對元素指定一個 2D 的旋轉
- 使用：
  - transform: rotate(0deg);
  - deg 增大，元素順時針旋轉
  - deg 減少，元素逆時針旋轉
  - 0deg 和 360deg 的效果是同樣的

平移 translate(0px, 0px)
- 定義：
- 使用：
  - transform: translateX(0px);
    - 水平方向平移
    - 數值增大，向右移
    - 數值減少，向左移
  - transform: translateY(0px);
    - 垂直方向平移
    - 數值增大，向下
    - 數值增大，向上
  - transform: translate(0px, 0px);
    - 同時控制水平，垂直平移
    - transform: translate(0px); 等同於 transform: translateX(0px);
    - 即只寫一個參數，第二個參數默認爲 0px。即只控制水平平移

縮放 scale(1)
- 定義：
- 使用
  - transform: scale(1);
    - 默認值 1
    - 能夠爲負值，-1 時爲翻轉，再小就是翻轉放大
  - transform: scaleX(1);
    - 設置水平方向的縮放
  - transform: scaleY(1);
  - transform: scale(1, 1);
    - 若是隻寫一個參數，元素的水平，垂直方向同時進行縮放

扭曲 skew(0deg)
- 定義：改變用戶視覺角度，
- 使用：
  - transform: skewX(0deg);
    - 水平方向扭曲
    - 扭曲度增長，視覺上向左
    - 扭曲度減少，視覺上向右
  - transform: skewY(0deg);
    - 垂直方向扭曲
    - 扭曲度增長，視覺上向下
    - 扭曲度減少，視覺上向上
  - transform: skew(0deg, 0deg);
    - skew(0deg);
    - 只寫一個數值，是等同於 transform: skewX(0deg); 控制水平方向扭曲的
- 當扭曲度 skew(90deg) 時，元素將垂直於屏幕，元素將在視覺上看不見
- 當扭曲度 skew(180deg) 時，與 skew(0deg) 效果一致

變換基點 transform-origin: center; （爲元素的左上角）
- 定義：元素變換的基準點。
- 使用：
  - transform-origin: 水平方向垂直方向;
- 默認基準點：
  - rotate 幾何元素中心點
  - scale 幾何元素中心點
  - skew 幾何元素中心點
  - translate 元素自身位置

#box {
    width: 200px;
    height: 200px;
    
    transform: rotate(0deg);
    
    /* 設置基準點爲元素左上角 */
    transform-origin: 0px 0px;
    
    /* 默認值 */
    transform-origin: center;
    transform-origin: 100% center;
    transform-origin: 100%;
    transform-origin: 100% 100%;
    transform-origin: 100px center;
    transform-origin: 100px;
    transform-origin: 100px 100px;

    /* 關鍵字 */
    transform-origin: top left;
    transform-origin: top;
    transform-origin: right;
    transform-origin: bottom;
    transform-origin: left;
}

/*百分比參照於自身 border-radius: background-size: background-origin: transform: translate(-50%， -50%); */

當前元素水平，垂直居中

/* 全部場景可用 */ #box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* 前提條件： width 和 height 必須已知 */
#box {
    width: 200px;
    height: 200px;

    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}

#box {
    width: 200px;
    height: 200px;

    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50% 0 0 -50%;
}

綜合變換（常常兩兩組合）

#box {
    width: 200px;
    height: 200px;
    background-color: olive;
    
    // 效果1    移動 200px 再縮小 0.5
    transform: translate(200px) scale(0.5);
    
    // 效果2    縮小 0.5，移動 100px
    transform: scale(0.5) translate(200px); /* x至關於 transform: translate(100px) scale(0.5); */
}

/* scale 發生縮放時，
 會將後面的 translate 的數值也會進行縮放
 對於後面的 rotate，skew 無影響

 
 rotate 發生旋轉時，
 會將後面的 translate 的 xy 座標軸也旋轉
 會將後面的 skew 的扭曲軸進行旋轉
 
 skew 發生扭曲時，
 會將後面的 translate 的 xy 座標軸也扭曲 */

3. 瓶體旋轉：
動畫

先寫瓶紙，再寫瓶體，保證瓶體在上
- 包裹（瓶紙-瓶體）
- 使用定位，使之重合
- 使用 js 設置包裹的寬高
- img 轉成塊兒，處理底部留白
- overflow 隱藏瓶紙
- 使用 js 定時器更新 transform: translateX(colaX+"px");
- 在紙後加一張紙，解決極值問題

        ... ...
        <style type="text/css">
            body {
                width: 100%;
                color: #000;
                background: #fff;
                font: 14px Helvetica, Arial, sans-serif;
            }
            
            /**** Cola Can Scroll ****/
            #can_box img {
                display: block;    /* 解決圖片留白 */
            }
            
            #can_bg img {
                float: left;    /* 兩張圖片在一行 */
            }
            
            #can_box {
                position: relative;
                margin: 150px auto;
                overflow: hidden;
            }
            
            #can_bg {
                position: absolute;
                top: 10px;
                left: 0px;
            }
            
            #can_body {
                position: absolute;
                top: 0px;
                left: 0px;
            }
        </style>
    </head>
    
    <body>
        
        <div id="can_box">
            
            <div id="can_bg">
                <img id="cola_bg" src="./img/cola_bg.jpg"/>
                <img src="./img/cola_bg.jpg"/>
            </div>
            
            <div id="can_body">
                <img id="cola_can" src="./img/cola_can.png"/>
            </div>
            
        </div>
        
        
        
        <!-- javascript 代碼 -->
        <script type="text/javascript">
            window.onload = function(){
                var canBox = document.getElementById("can_box");
                var canBg = document.getElementById("can_bg");
                var colaBg = document.getElementById("cola_bg");
                var colaCan = document.getElementById("cola_can");
                
                canBox.style.width = colaCan.offsetWidth+"px";
                canBox.style.height = colaCan.offsetHeight+"px";
                
                canBg.style.width = colaBg.offsetWidth* 2+"px";
                canBg.style.height = colaCan.offsetHeight+"px";
                
                var canLeft = 0;
                window.setInterval(function(){
                    canLeft -= 1;
                    if(canLeft <= -colaBg.offsetWidth){
                        canLeft = 0;
                    }
                    
                    canBg.style.transform = "translate("+canLeft+"px)";
                },20);
            };
        </script>
        ... ...

4. 動態時鐘spa

HTML 元素刻度、時、分、秒、表芯
定位使各元素歸位。
用 js 給各個刻度設置變換基點，再設置旋轉角度
注意細節：整點刻度的變換基點與普通刻度的變換基點不同
注意細節：時針，分針移動方式。。。
- 例如 11:30:30，
  - sec = date.getSconds();
  - min = date.getMinutes()+sec/60;
  - hour = date.getHours()+min/60;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Timing Clock</title>
        
        <link rel="stylesheet" type="text/css" href="./css/index.css" />
        
        <script type="text/javascript" src="./js/kjfFunctions.js"></script>
        <script type="text/javascript" src="./js/index.js"></script>
        
        <style type="text/css">
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
            }
            
            /**** Timing clock ****/
            #clock_dial {
                position: relative;
                
                width: 300px;
                height: 300px;
                margin: 300px auto 0;
                border-radius: 50%;
                background: olive;
            }
            
            #clock_second {
                position: absolute;
                top: 30px;
                left: 149px;
                transform-origin: 1px 120px;
                
                width: 2px;
                height: 120px;
                background-color: red;
            }
            
            #clock_minute {
                position: absolute;
                top: 70px;
                left: 148px;
                transform-origin: 2px 80px;
                
                width: 4px;
                height: 80px;
                background-color: green;
            }
            
            #clock_hour {
                position: absolute;
                top: 100px;
                left: 147px;
                transform-origin: 3px 50px;
                
                width: 6px;
                height: 50px;
                background-color: blue;
            }
            
            #clock_core {
                position: absolute;
                top: 145px;
                left: 145px;
                
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: pink;
            }
            
            .clock_scale {
                position: absolute;
                top: 0px;
                left: 149px;
                transform-origin: 1px 150px;
                
                width: 2px;
                height: 5px;
                background-color: #68ea94;
            }
            
            .clock_scale:nth-child(5n) {
                transform-origin: 2px 150px;
                
                width: 4px;
                height: 10px;
                background-color: #68ea94;
            }
        </style>
    </head>
    
    <body>
        
        <div id="clock_dial">
            <div id="clock_second">
            </div>
            
            <div id="clock_minute">
            </div>
            
            <div id="clock_hour">
            </div>
            
            <div id="clock_core">
            </div>
            
        </div>
        
        
        
        <!-- javascript 代碼 -->
        <script type="text/javascript">
            /**** 畫刻度 ****/
            var clockDial = document.getElementById("clock_dial");
            
            var i = 0;
            for(i=0; i<=59; i++){
                var firstDiv = document.createElement("div");
                firstDiv.className = "clock_scale";
                clockDial.appendChild(firstDiv);
                firstDiv.style.transform = "rotate("+ 6*i +"deg)";
            }
            
            /**** 動起來 ****/
            var clockSecond = document.getElementById("clock_second");
            var clockMinute = document.getElementById("clock_minute");
            var clockHour = document.getElementById("clock_hour");
            window.setInterval(function(){
                var nowTime = new Date();
                s = nowTime.getSeconds();
                m = nowTime.getMinutes()+s/60;
                h = nowTime.getHours()+m/60;
                clockSecond.style.transform = "rotate("+s*6+"deg)";
                clockMinute.style.transform = "rotate("+m*6+"deg)";
                clockHour.style.transform = "rotate("+h*30+"deg)";
                
            },1000);
        </script>
    </body>
</html>

1. css3-轉換旋轉過渡動畫
2. WPF動態變換旋轉飛入
3. CSS3轉換過渡動畫
4. 旋轉變換
5. css3 變換transform 過渡transition 動畫 animation
6. css3中的變換、動畫和過渡
7. 【CSS】過渡、動畫和變換
8. Vue | 19 過渡&動畫-狀態過渡
9. CSS3的過渡，動畫，圖形轉換
10. CSS3裏的轉換與過渡動效
更多相關文章...
• jQuery Mobile 過渡 - jQuery Mobile 教程
• XSLT - 轉換 - XSLT 教程
• Git五分鐘教程
• 算法總結-滑動窗口

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。