卡卡網(wǎng)

今天介紹一款CSS實現(xiàn)的漂亮的側(cè)欄（圖標(biāo)+文字）樣式設(shè)計。

demodownload

實例簡介

側(cè)欄顯示圖標(biāo)+文字的設(shè)計方式，點擊項目時，圖標(biāo)有一個動畫效果。

本實例使用CSS+SVG+JavaScript來實現(xiàn)。

CSS設(shè)計樣式，SVG設(shè)計圖標(biāo)，JavaScript實現(xiàn)圖標(biāo)過渡動畫效果。

HTML

下面是側(cè)欄一個項目的代碼結(jié)構(gòu)。

<button class="home">
  <div>
    <div class="icon">
      <svg viewBox="0 0 24 24">
        <path class="outline" d="......" />
        <path class="triangle" d="......" />
      </svg>
    </div>
    主頁
  </div>
</button>

外面是一個button標(biāo)簽的盒子，第二層是一個div，該div內(nèi)含項目名稱和一個class=icon的div——這個div是項目圖標(biāo)容器，圖標(biāo)是使用SVG畫出來的。

CSS

CSS設(shè)計button、div、svg等樣式。

通過CSS可輕松修改側(cè)欄的寬度。

aside {
  width: 180px; 
  border-radius: 24px;
  padding: 40px;
  background: var(--c-sidebar);
}

width: 180px; 是側(cè)欄寬度定義。

JavaScript

本實例JavaScript需引用兩個JS庫文件（文件包含在源碼壓縮包內(nèi)）。

<script src='gsap.min.js'></script>
<script src='MorphSVGPlugin3.min.js'></script>

JavaScript實現(xiàn)SVG動畫，當(dāng)鼠標(biāo)點擊項目時，該項目的圖標(biāo)顯示一個過渡動畫效果。

總結(jié)

本文介紹了一款CSS實現(xiàn)的漂亮的側(cè)欄（圖標(biāo)+文字）樣式設(shè)計，使用CSS+SVG+JavaScript來實現(xiàn)，代碼較為復(fù)雜，不過效果相當(dāng)不錯，喜歡的朋友可以直接下載源碼使用。

您可能對以下文章也感興趣

• 欄目/目錄導(dǎo)航菜單(水平橫向)
• jQuery實現(xiàn)的水平可滾動導(dǎo)航菜單

相關(guān)文章

• 純CSS實現(xiàn)的上下滑動翻頁【演示/源碼下載】
• CSS 3D滑塊動畫效果(水平或垂直方向無限循環(huán)滾動)
• 一組精致好看的CSS表單樣式：checkbox、radio、text等
• 純CSS+SVG創(chuàng)建有趣的動畫復(fù)選框checkbox
• 一個具有鼠標(biāo)懸停動畫效果的SVG復(fù)選框checkbox
• 8款SVG創(chuàng)建的動畫checkbox多選框和radio單選框
• CSS示例：漂亮的切換開關(guān)（toggle switches）樣式
• 純CSS：兩個非常漂亮的checkbox和radio按鈕樣式
• 使用SVG實現(xiàn)的漂亮的復(fù)選框（checkbox）樣式
• 兩例純CSS樣式：單選radio/復(fù)選checkbox按鈕

標(biāo)簽: css  側(cè)欄