<div id="q0ue2"></div>
  • <table id="q0ue2"></table>
  • <wbr id="q0ue2"></wbr>
    <div id="q0ue2"><acronym id="q0ue2"></acronym></div>
  • 咨詢電話:
    15628812133
    03
    2023/12

    偽元素與hover的妙用

    發布時間:2023-12-03 22:40:49
    發布者:·
    瀏覽量:
    0

    after(before)與hover的妙用 (2)

    做項目的時候經常出現這種樣式,當你鼠標移動到塊元素上,會出現一個進度條或者向兩邊發散的條,會讓頁面更加美觀,這種條不能用邊框代替,因為你不能決定邊框寬度,而你專門放一個div會讓你的結構看起來不是很美觀。

    這里我們可以用偽元素來解決這個問題。偽元素允許你在已選擇的元素內部創建或修改內容,而無需在文檔結構中添加額外的HTML元素。 

    還是我們的結構,熟悉的css。對于結構的問題可以看這里.

    這邊對于after最好使用定位,脫離文檔流之后不僅可以在任何地方方便展示,而且還不會占用原本的html所占的空間。

     

    這里我鼠標放上去之后,after經過兩秒的動畫效果之后已經開始變長。

     after(before)與hover的妙用 (5)

    還有另外一種從中間發散的方式,其實也是非常簡單。

    after(before)與hover的妙用 (6)

    after(before)與hover的妙用 (1)

     

    只需要改變一下after的初始位置就可以了。

    關鍵詞:
    返回列表
    国产办公室秘书无码精品_AV无码天堂AV_A级毛片无码专区免费看
    <div id="q0ue2"></div>
  • <table id="q0ue2"></table>
  • <wbr id="q0ue2"></wbr>
    <div id="q0ue2"><acronym id="q0ue2"></acronym></div>