css實(shí)現(xiàn)瀏覽歷史小塊

Honwhy 發(fā)布于2019-08-30 15:55 / 1602人閱讀

動(dòng)圖


      
      瀏覽歷史

.browse-history {
    position: absolute;
    top: -40px;
    right: 0;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    &:hover {
      .history-icon {
        display: none;
      }
    }
    .history-icon {
      display: inline-block;
      margin: 8px;
      width: 24px;
      height: 24px;
      background: url("~@/assets/icon/browse-history.svg");
      background-size: cover;
    }
    .history-txt {
      display: inline-block;
      padding: 8px;
      font-size: 12px;
      color: @azure-6;
    }
  }

主要利用overflow和hover

云服務(wù)器 GPU云服務(wù)器解讀css發(fā)展歷史 php歷史瀏覽歷史瀏覽記錄在哪 JS輕松實(shí)現(xiàn)CSS設(shè)置

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117419.html

相關(guān)文章

JavaScript基于時(shí)間的動(dòng)畫算法

摘要：基于時(shí)間的動(dòng)畫算法其實(shí)思路和實(shí)現(xiàn)都很簡單。而基于時(shí)間的動(dòng)畫算法要注意邊緣時(shí)間的損失，最好采取積累時(shí)間，然后分固定片更新動(dòng)畫的方式。作者：戴嘉華轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接和作者信息目錄前言基于幀的動(dòng)畫算法（Frame-based）基于時(shí)間的動(dòng)畫算法（Time-based）改良基于時(shí)間的動(dòng)畫算法總結(jié) 前言前段時(shí)間無聊或有聊地做了幾個(gè)移動(dòng)端的HTML5游戲。...

TNFE 2019-08-21 10:22 評(píng)論0 收藏0
CSS 實(shí)現(xiàn) 1px 以內(nèi)的移動(dòng)

摘要：之前的文章說過關(guān)于行內(nèi)元素垂直方向?qū)R的方案。在上一篇文章里我們提到了內(nèi)的移動(dòng)問題。屏的移動(dòng)設(shè)備如何實(shí)現(xiàn)真正的線移動(dòng)點(diǎn)像素的秘密看完大徹大悟，佩服佩服，思路很多，回到本文重點(diǎn)想一下能實(shí)現(xiàn)移動(dòng)的方法。 showImg(https://segmentfault.com/img/remote/1460000007194919?w=2556&h=688); 之前的文章說過關(guān)于行內(nèi)元素垂直方向?qū)?..

appetizerio 2019-08-29 11:28 評(píng)論0 收藏0
我遇到的前端面試題2017

摘要：箭頭函數(shù)與傳統(tǒng)函數(shù)的區(qū)別，主要集中在以下方面沒有和綁定，這些值由最近一層非箭頭函數(shù)決定。不能通過關(guān)鍵字調(diào)用，所以不能用作構(gòu)造函數(shù)，否則程序會(huì)拋出錯(cuò)誤。聲明的全局變量不是全局對(duì)象的屬性。 showImg(https://segmentfault.com/img/remote/1460000013229911?w=2402&h=1398); 本文首發(fā)于我的博客：http://blog.du...

muddyway 2019-08-01 17:35 評(píng)論0 收藏0
我遇到的前端面試題2017

摘要：箭頭函數(shù)與傳統(tǒng)函數(shù)的區(qū)別，主要集中在以下方面沒有和綁定，這些值由最近一層非箭頭函數(shù)決定。不能通過關(guān)鍵字調(diào)用，所以不能用作構(gòu)造函數(shù)，否則程序會(huì)拋出錯(cuò)誤。聲明的全局變量不是全局對(duì)象的屬性。 showImg(https://segmentfault.com/img/remote/1460000013229911?w=2402&h=1398); 本文首發(fā)于我的博客：http://blog.du...

Lucky_Boy 2019-08-21 16:22 評(píng)論0 收藏0
我遇到的前端面試題2017

摘要：箭頭函數(shù)與傳統(tǒng)函數(shù)的區(qū)別，主要集中在以下方面沒有和綁定，這些值由最近一層非箭頭函數(shù)決定。不能通過關(guān)鍵字調(diào)用，所以不能用作構(gòu)造函數(shù)，否則程序會(huì)拋出錯(cuò)誤。聲明的全局變量不是全局對(duì)象的屬性。 showImg(https://segmentfault.com/img/remote/1460000013229911?w=2402&h=1398); 本文首發(fā)于我的博客：http://blog.du...

forrest23 2019-08-29 13:23 評(píng)論0 收藏0