使用before和after屬性選擇器_ZenDei技術網路在線

使用before和after屬性選擇器

-Advertisement-

最近仿造了小米官網寫了一遍，可以說是完全把官網給寫完了。官網中有一個log切換的動態效果，有點把我卡住了找方法找了許久，然後用一個簡單的方法實現了：先瞭解一下before和after兩個屬性選擇器： before：在元素之前插入內容； after：在元素之後插入內容；兩個屬性可以添加圖片類型， ...

最近仿造了小米官網寫了一遍，可以說是完全把官網給寫完了。

官網中有一個log切換的動態效果，有點把我卡住了找方法找了許久，然後用一個簡單的方法實現了：

先瞭解一下before和after兩個屬性選擇器：

before：在元素之前插入內容；

after：在元素之後插入內容；

兩個屬性可以添加圖片類型，可以添加文字，可以添加div塊，所以在網頁的應用範圍很廣。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css3小米log切換</title>
    <style>
        .log{ 
            /* 
                設置外部盒子高55寬55文本居中。背景顏色為橙色，溢出隱藏，居中
            */
            text-align: center;
            cursor: pointer;
            overflow: hidden;
            width: 55px;
            height: 55px;
            background-color:rgb(255,103,0);
            margin:40px auto; 
        }
        /* 
            在div前插入一個寬為49 高49 top 3 left -49 將home.png移出log盒子，
            設置過度時間0.2s，背景圖片為home.png
        */
        .log::before{
            width: 49px;
            height: 49px;
            content: "";
            position: relative;
            top: 3px;
            left:-49px;
            background: url('img/mi-home.png') center;
            display: inline-block;
            transition:all .2s ease 0s;
        }
        /* 
            在div前插入一個寬為49 高49 top -49 left 0 將log.png移出log盒子，
            設置過度時間0.2s，背景圖片為log.png
        */
        .log::after{
            width: 49px;
            height: 49px;
            content: "";
            position: relative;
            top: -49px;
            left: 0;
            background: url('img/mi-logo.png') center;
            display: inline-block;
            transition:all .2s ease 0s;
        }
        /* 
           懸浮對兩張圖片進行偏移，達到切換效果
        */
        .log:hover::before{
            left: 0;
            
        }
        .log:hover::after{
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="log"></div>
</body>
</html>

在使用這兩個屬性時：content 是必不可少的。

除此之外：在寫這個的過程中我對選擇器有了更深一層的理解：

代碼如下：

<!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>
        /* 
           設置div1的樣式
        */
        .div1 {
            width: 400px;
            height: 200px;
            background-color: lawngreen;
        }
        /* 
           設置div2的樣式
        */
        .div2 {
            width: 400px;
            height: 200px;
            background-color: lightcoral;
        }
        /* 
          設置div3的樣式
        */
        .div3{
            width: 400px;
            height: 200px;
            background-color: olivedrab;
        }
        /* 
           設置div1的子div樣式並隱藏
        */
        .div1>div{
            width: 200px;
            height: 100px;
            background-color: rgb(18, 53, 150);
            display: none;
        }
        /* 
          設置div2的子div樣式並隱藏
        */
        .div2>div {
            width: 200px;
            height: 100px;
            background-color: rgb(165, 24, 24);
            display: none;
        }
        /* 第一個懸浮父元素修改其子元素div樣式使子div顯現 */
        .div1:hover>div{    
            display: inline-block;
        }
        /* 懸浮第一個div1修改其兄弟元素div2的背景顏色*/
        .div1:hover + .div2{    
            background-color: mediumvioletred;
        }
        /* 懸浮第一個div1修改其同級的div3的boder */
        .div1:hover ~ .div3{    
            border: 10px solid rgb(138, 46, 46);
        }
        /* 
           將css選擇器一層層嵌套使用就可以實現簡單的動畫效果，也可以添加過度效果就會更加生動，
           css3的屬性可以實現部分js功能，但不建議這樣使用，複雜的動畫效果使用js將會更加方便快捷
        */
    </style>
</head>

<body>
    <div class="div1">
        我是第一個div1
        <div>
            我是第一個div1的子div
        </div>
    </div>
    <div class="div2">
        我是第二個div2
        <div>
            我是第二個div2的子div
        </div>
    </div>

    <div class="div3">
        我是第三個div3
          <div>
            我是第三個div3的子div
          </div>
    </div>
</body>
</html>

使用的圖片

敲完此次案例對於代碼的理解和熟練程度更加的清晰

個人學習，內容簡略

https://www.w3school.com.cn/cssref/css_selectors.asp

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

01.基本數據類型

基本數據類型（7種） number 1,2,3...... string '你好', 'hello', "helleo" boolean false/ true null undefined symbol object arr/fuction 標識符 : 所有用戶自定義的名字叫做標識符 1.不能以數 ...
36.數組—引用（stack , heap）

------------------------------------------------------------------------------------------------------------------------------------------------------... ...
JavaScript連載24-正則表達式

一、正則表達式 1.基本概念（簡略）三大作用：匹配，提取，替換正則表達式的組成：普通字元和元字元元字元元字元描述 \d 匹配一個數字字元，等價於[0-9] \D 匹配一個非數字字元，等價於[^0-9] \w 匹配一個包括下劃線在內的任意單詞字元，等價於[A-Za-z0-9] \W 匹配任何非 ...
css中的flex佈局

flex佈局任何一個容器都可以指定為flex佈局當父盒子設為flex佈局後，子元素的float、clear、vertical-align屬性將失效伸縮佈局=彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局採用flex的元素，稱為Flex容器（flex container）簡稱”容器“。它的所 ...
Vue你不得不知道的非同步更新機制和nextTick原理

前言非同步更新是 Vue 核心實現之一，在整體流程中充當著 watcher 更新的調度者這一角色。大部分 watcher 更新都會經過它的處理，在適當時機讓更新有序的執行。而 nextTick 作為非同步更新的核心，也是需要學習的重點。本文你能學習到：非同步更新的作用 nextTick原理非同步更新 ...
35.數組.選擇排序

選擇排序：第一輪：第0個與第1個比，如果第0個 > 第1個那就交換位置，第0個再與第2個比...... 第二輪：第1個與第2比， ...................直到排序完成 let arr = [5,4,3,2,1] for(let i = 0; i < arr.length - ...
34.冒泡排序

參考網站 https://visualgo.net/ 冒泡排序：前後兩個數兩兩進行比較前 < 後, 則後面一個繼續與下一個比較前 > 後,則交換位置，再與下一個比較第一輪比較完成可以確定最後一個數字的位置再進行第二輪來確定倒數第二個的位置直到排序完成 arr.length = 5 關於 ...
阿裡巴巴矢量圖標庫的使用

在參考小米官網寫頁面你時，會發現小米中有很多的矢量圖標，小米的圖標或許是自己的，但是我們寫頁面時要用到矢量圖標時怎麼辦，可以使用阿裡提供的圖標庫阿裡矢量圖標庫網址：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 註冊一 ...