CSS中2d轉換：transition過渡放在:hover僞類中與應用在整個元素中區別

時間 2019-11-14

標籤 css 2d 轉換 transition 過渡放在 hover 應用整個元素區別欄目 CSS 简体版

原文原文鏈接

css的2d轉換十分強大，可以在不使用js的狀況下，實現頁面的元素與用戶之間更多動態的交互，加強用戶體驗。其中使用最多的就是hover僞類。css

一、建立一個頁面的div元素：html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2d轉換測試</title>
        
    </head>
    <body>
        <div id="fr">
            <div class="de">我是測試文本</div>
            <div class="de">我是測試文本</div>
            <div class="de">我是測試文本</div>
            <div class="de">我是測試文本</div>
                
        </div>
    </body>
</html>

二、css中給定元素的樣式：瀏覽器

#fr{
        width: 500px;
        height: 600px;
        border: 1px solid gray;
        margin: 20px auto;
            }

.de{
       width:100px;
       height:100px;
       border:1px solid green;
       margin: 10px auto;
            }

三、瀏覽器解析的效果：測試

四、給第一個正方形加入鼠標點擊後的效果css：動畫

.de:first-child:hover{
                transform: translate(0px,-5px);

                transition: transform 1s;
            }

效果：spa

鼠標移動到正方形區域後，小方塊會向上移動5px，有過渡效果；離開小方塊後，當即回到原位，沒有過渡效果；3d

另一種寫法：code

.de:first-child{
                transition: transform 1s;
            }
            .de:first-child:hover{
                transform: translate(0px,-5px);
                
            }

將transition過渡效果寫在被選中的整個元素中，出現的效果：orm

鼠標移動到正方形區域後，小方塊會向上移動5px，有過渡效果；離開小方塊後，小方塊會到原始位置，有過渡效果。htm

原理：將過渡效果transition寫在hover僞類中，鼠標進入時，hover效果會應用transition效果；鼠標移出，屬於非hover，沒有過渡效果；即，元素移動過程當中，有過渡效果；元素回到原始位置，沒有過渡效果。將transition過渡寫在整個元素中，會在元素整個移動過程當中起到過渡效果。

五、給每一個小方塊加入動畫效果完整的css：

#fr{
                width: 500px;
                height: 600px;
                border: 1px solid gray;
                margin: 20px auto;
                
            }
            .de{
                width:100px;
                height:100px;
                border:1px solid green;
                margin: 10px auto;
            }
            .de:first-child{
                transition: transform 1s;
            }
            .de:first-child:hover{
                transform: translate(0px,-5px);
                
            }
            .de:nth-child(2){
                transition: transform 1s;
            }
            .de:nth-child(2):hover{
                transform: rotate(360deg);
            }
            
            .de:nth-child(3){
                transition: transform 1s;
            }
            .de:nth-child(3):hover{
                transform: skew(30deg ,30deg);
                
            }
            .de:last-child{
                transition: transform 1s;
            }
            .de:last-child:hover{
                transform: scale(1.05,1.05);
                
            }

效果：

全部的 transform transition都須要進行瀏覽器兼容性適配，這裏僅僅是爲了演示，沒有對瀏覽器進行適配。

相關標籤/搜索

每日一句

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