今天介紹一款CSS實現的漂亮的側欄（圖標+文字）樣式設計。

demodownload

實例簡介

側欄顯示圖標+文字的設計方式，點擊項目時，圖標有一個動畫效果。

本實例使用CSS+SVG+JavaScript來實現。

CSS設計樣式，SVG設計圖標，JavaScript實現圖標過渡動畫效果。

HTML

下面是側欄一個項目的代碼結構。

<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標簽的盒子，第二層是一個div，該div內含項目名稱和一個class=icon的div——這個div是項目圖標容器，圖標是使用SVG畫出來的。

CSS

CSS設計button、div、svg等樣式。

通過CSS可輕松修改側欄的寬度。

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

width: 180px; 是側欄寬度定義。

JavaScript

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

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

JavaScript實現SVG動畫，當鼠標點擊項目時，該項目的圖標顯示一個過渡動畫效果。

總結

本文介紹了一款CSS實現的漂亮的側欄（圖標+文字）樣式設計，使用CSS+SVG+JavaScript來實現，代碼較為復雜，不過效果相當不錯，喜歡的朋友可以直接下載源碼使用。

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

• 欄目/目錄導航菜單(水平橫向)
• jQuery實現的水平可滾動導航菜單

相關文章

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

標簽: css  側欄