css3之導航transition圖示的變化

阿新 • • 發佈：2020-12-11

技術標籤：網頁設計 css3 html 網頁設計 transition transform

css3之導航transition圖示的變化

原理：用了兩個圖片，一個有顏色，一個沒有，都放在精靈圖中。再用position定位，和transition變化。
在這裡插入圖片描述
程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" 
>
    <title>導航transition圖示變化</title>
    <style>
        *{margin: 0;padding: 0;}
        li ,ul {
            list-style: none;
        }
        a{text-decoration: none;}
        nav{
            width: 300px;
            height: 50px;
            margin: 100px auto;
            /* border: springgreen solid 1px; */ 


        }
        nav ul li{
            float: left;
        }
        nav li a{
            display: block;
            padding-left: 20px;
            /* border: solid red 1px ; */
            width: 50px; 
            height: 50px;
            text-align: center;
            line-height: 50px;
            color 
: green;
            font-weight: 600;
        }
        ul li:nth-child(1) a{
            background: url(images/360bg.png) no-repeat 0px 21px ;
           
            
        }
        ul li:nth-child(1):hover a{
            background: url(images/360bg.png) no-repeat 0px -13px ;
            
              
            transition: 1s;
        }
        ul li:nth-child(2) a{
            background: url(images/360bg.png) no-repeat 0px -48px ;
        }
        ul li:nth-child(2):hover a{
            background: url(images/360bg.png) no-repeat 0px -87px ;
            
              
            transition: 1s;
        }
        ul li:nth-child(3) a{
            background: url(images/360bg.png) no-repeat 0px -125px ;
        }
        ul li:nth-child(3):hover a{
            background: url(images/360bg.png) no-repeat 0px -166px ;
            
              
            transition: 1s;
        }
        ul li:nth-child(4) a{
            background: url(images/360bg.png) no-repeat 0px -207px ;
        }
        ul li:nth-child(4):hover a{
            background: url(images/360bg.png) no-repeat 0px -248px ;
            
              
            transition: 1s;
        }
    </style>
</head>
<body>
    
    <nav>
        <ul>
            <Li><a href="">熱點</a></Li>
            <Li><a href="">首頁</a></Li>
            <Li><a href="">新聞</a></Li>
            <Li><a href="">視訊</a></Li>
        </ul>
    </nav>
</body>
</html>

css3之導航transition圖示的變化

技術標籤：網頁設計css3html網頁設計transitiontransform css3之導航transition圖示的變化

ant-vue之導航跳轉（非點選導航事件）動態監聽路由變化

在做導航時，vue-ant 導航點選事件框架互動是根據selected=[\'navitem\']來進行的繫結的selected每次點選更改navitem值即可，但是如果出現手動輸入路徑和在其它頁面點選返回，路徑變了，導航的事件和預設是不會發生

vue+elementUi 實現密碼顯示/隱藏+小圖示變化功能

vue+elementUi 實現密碼顯示/隱藏+小圖示變化（js一共三行程式碼，其中一行為了美觀）...，先給大家展示下效果圖，感覺不錯可以參考實現程式碼。

.NET Core 3 WPF MVVM框架 Prism系列之導航系統

本文將介紹如何在.NET Core3環境下使用MVVM框架Prism基於區域Region的導航系統在講解Prism導航系統之前，我們先來看看一個例子,我在之前的demo專案建立一個登入介面：

微信小程式之導航滑塊檢視容器功能的實現程式碼(簡單兩步)

先看效果圖：這個滑塊除了可以點選上方的導航，還可以左右切換頁面，隨之導航也跟這切換。

css3之圖片正反面翻轉

效果圖: 簡化程式碼如下: 1 <template> 2<div class=\"flip-box\"> 3<div class=\"flip-item flip-item-front\">

vue 導航錨點_點選平滑滾動,導航欄對應變化詳解

最終效果如下：（注意需要做錨點聯動的部分並不在頁面的頂部而是頁面的某個div內）-chrome

ant design pro of vue導航選單圖示引入阿里巴巴向量庫iconfont方法

第一步: 去阿里巴巴向量庫生成專案圖示。複製以下程式碼: 第二步: 開啟專案元件中Menu/menu.js.

《怪物獵人物語2破滅之翼》屬性變化及異常狀態效果介紹

《怪物獵人物語2破滅之翼》中的許多技能都可以對己方或敵方單位造成屬性資料上的變化，也可能受到一些異常狀態的影響。那麼本作中都有哪些類似效果呢？今天就為大家介紹一下《怪物獵人物語2破滅之翼》屬性變化及異常

vue3 學習筆記之axios的使用變化總結

目錄一、axio 得基本使用二、如何解決跨域問題？三、封裝四、全域性引用 axios使用 axios 之前，需要先安裝好。

css3之動畫

1 2D轉換轉換是css3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、縮放等效果

自設園子之導航頁面

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\"

WordPress導航選單圖示字型外掛font awesome 4 menus純程式碼版

換成 Begin 主題之後，大夥都不約而同的給選單用上了圖示字型，確實給部落格帶來了一定的美化效果。

bootstrap左側手風琴導航點選後變化三角形圖示

https://www.jb51.net/article/84408.htm 箭頭跟隨選單的展開合併而變化 <a href=\"#systemSetting\" class=\"nav-header collapsed\" data-toggle=\"collapse\">

Flutter開發之路由與導航的實現

如果說構成檢視元素的基本單位是元件，那麼構成應用程式的基本單位就是頁面。對於擁有多個頁面的應用程式而言，如何從一個頁面平滑地過渡到另一個頁面，是技術框架需要考慮的問題。

Vue過渡效果之CSS過渡詳解(結合transition,animation,animate.css)

以一個toggle按鈕控制p元素顯隱為例，如果不使用過渡效果，則如下所示 <div id=\"demo\">

Flutter開發之設定應用名稱及圖示的教程

最近在用Flutter開發App專案，一切都是新的，一切都要學習。不過經過一段時間的開發適應和磨合，趨於穩定狀態。本篇博文來分享一下Flutter設定App的應用名字和應用logo圖示的方法，知識點雖然簡單，但是不知道這個知

vue與ElementUI專案建立二之簡單的導航元件運用

1、建立導航頁元件我們在src目錄下新建一個資料夾，名為components，今後我們的元件都會放在這個資料夾中。在components目錄下新建一個Navi目錄，在Nav目錄中新建一個名為Nav.vue的元件。至此我們的目錄應該是如下圖

Vue生態圈之----vue-router----導航守衛

引數或查詢的改變並不會觸發進入/離開的導航守衛全域性的全域性前置守衛當一個導航觸發時，全域性前置守衛按照建立順序呼叫。守衛是非同步解析執行，此時導航在所有守衛 resolve 完之前一直處於等待中。

預防新型冠狀病毒科普宣傳網站之header導航欄（2020年7月22日）

網站的頭部份（header）包括一個部分導航欄；現在的需求是當頁面往下拉時，導航選單固定，而且處於瀏覽器的最上面。那麼我們現在就來實現它：

css3之導航transition圖示的變化

css3之導航transition圖示的變化

相關推薦