《前端實戰總結》之使用純css實現網站換膚和焦點圖切換動畫

徐小夕發表於2019-12-20
前端CSS網站動畫

今天我們來繼續覆盤一些工作中常用的css技巧和知識,以便我們可以更加優雅的用css實現富有動感的網站.

你將收穫

  • 網站換膚設計方案介紹
  • :target偽類介紹和用法以及如何使用css實現網站換膚
  • transition動畫以及如何用純css實現焦點圖動畫

效果展示

1.網站換膚

《前端實戰總結》之使用純css實現網站換膚和焦點圖切換動畫
2.焦點圖動畫
《前端實戰總結》之使用純css實現網站換膚和焦點圖切換動畫

實現思路

1.網站換膚

通常我們實現網站換膚都基於如下方式實現:

  • 方案一: 使用OOCSS模式,通過js動態切換公共類名來達到換膚效果
  • 方案二: 點選不同的按鈕切換不同的樣式表,如下:
    • theme-green.css
    • theme-red.css
    • theme-black.css
  • 方案三: localStorage儲存主題,js動態獲取本地儲存換膚
  • 方案四: element和antd的動態換膚,需要實時編譯style樣式表

以上幾個方案都可以實現一定程度上的換膚效果,但是如果是一些基礎性的換膚,比如網站的背景樣式,某個按鈕的樣式,某塊內容區域的樣式等等這種區域性的換膚,我們能不能直接用css來實現呢?答案是可以的,接下來我們就來看純看css如何實現網站換膚.

在實現換膚之前,我們需要了解一個知識點,那就是a標籤的:target偽類.

:target偽類

為了輔助標識那些指向文件特定部分連結的目標, CSS3 選擇器 引入了 :target 偽類. :target 偽類用來指定那些包含片段識別符號的 URI 的目標元素樣式。

例如, http://xuxi#home , 這個 URI 包含了 #home 片段識別符號。 在HTML中, 識別符號是元素的id或者name屬性,。由於這兩者位於相同的名稱空間，因此，這個示例 URI 指向的是文件頂層的 "home" 。

假設你想修改 URI 指向的任何 div 元素，但是又不想把樣式應用到任何其它同型別的元素，那麼我們可以這麼寫：

<style>
    div:target {
        background: #06c;
    }
</style>
<a href="#home" >藍</a>
<div id="bg1"></div>
複製程式碼

此時當我們點選a標籤時,會命中:target的元素,這個時候會將div的背景色設定為藍色,即#06c.

瞭解這個偽類之後,我們的網站換膚就很容易實現了,比如說我們要實現網站背景色的換膚,我們可以預先準備幾個背景色的容器, 然後用a標籤的href錨點分別對應相應的背景元素id,然後當點選背景色的時候調整背景容器的層級,這樣就可以實現換膚了,實際效果可以看文章開頭的效果展示. 具體程式碼如下:

<style>
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
    .bg1 {
      z-index: 10;
      background-color: #000;
    }
    .bg2 {
      background-color: #06c;
    }
    .bg3 {
      background-color: #f0c;
    }
    .skin-btn-wrap {
      position: absolute;
      padding: 4px 10px;
      border-radius: 20px;
      line-height: 20px;
      background-color: #fff;
      z-index: 11;
      right: 20px;
      top: 20px;
    }
    .skin-btn-wrap a {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 10px;
    }
    #one {
      background-color: #000;
    }
    #two {
      background-color: #06c;
    }
    #three {
      background-color: #f0c;
    }
    .bg:target {
      z-index: 10;
    }
    .bg:not(:target) {
      z-index: 0;
    }
  </style>

  <!-- css背景換膚 -->
  <div class="bg1 bg" id="bg1"></div>
  <div class="bg2 bg" id="bg2"></div>
  <div class="bg3 bg" id="bg3"></div>
  <div class="skin-btn-wrap">
    <a href="#bg1" id="one"></a>
    <a href="#bg2" id="two"></a>
    <a href="#bg3" id="three"></a>
  </div>
複製程式碼

2.焦點圖動畫

焦點圖動畫主要來自我們司空見慣的輪播圖,我們點選輪播圖的某個指示點時,可以切換會對應的圖片,焦點輪播圖常用的方案主要是用javascript和css共同實現,方案有大致以下幾種:

  • bootstrap的輪播圖外掛
  • jquery市場的豐富的輪播圖外掛
  • swiper.js(豐富而強大,小程式也內建了swiper元件)
  • antd/element內建輪播圖元件
  • slick
  • unslider 最簡單的輪播圖元件
  • fancyBox 可以為頁面上的圖片、html 內容和多媒體新增縮放功能
  • sly 導航式、可單向滾動
  • Sequence 可以建立響應式幻燈片、演示、旗幟廣告和以步驟為基礎的CSS 動畫框架
  • PhotoSwipe 適用於移動裝置和桌面電腦,基於原生JavaScript的模組元件

以上介紹的方案都很成熟,我們可以直接拿來使用,但是為了追求簡潔和程式碼量最低,我們有辦法用純css實現一個簡單的焦點圖切換動畫嗎?

實現思路也很簡單,我們也會基於上面講的:target偽類來實現,這裡為了實現動畫效果,我們使用了transiton動畫,關於transtion和偽元素的更多介紹和使用,可以參考:

實現思路如下:

  1. 建立焦點圖和控制點的對應關係
  2. 初始化頁面時只讓第一個焦點圖有寬度,其他寬度都設定為零,當控制點啟用時,然控制點對應的目標物件的寬度設定為正常值,其他的非目標物件都設定為零
  3. 給焦點圖新增transition過渡動畫
  4. 優化焦點圖和控制點樣式

具體程式碼如下:

 <style>
    .swiper {
      position: relative;
      margin: 0 auto;
      display: flex;
      width:80vw;
      height: 250px;
      padding: 18px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 0 20px rgba(0,0,0, .2);
    }
    .swiper .img {
      height: 250px;
      width: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width .6s;
      background-color: #06c;
      color: #fff;
    }
    .swiper .img:first-child {
      width: 100%;
    }
    .swiperControl {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 30px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0;
      background-color: rgba(0,0,0, .3);
    }
    .swiperControl .dot {
      display: inline-block;
      margin: 0 6px;
      width: 8px;
      height: 8px;
      border-radius: 6px;
      background-color: rgba(255,255,255, .6);
    }
    .swiperControl .dot:hover {
      background-color: rgba(255,255,255, 1);
    }
    .swiper .img:target {
      width: 100%;
    }
    .swiper .img:not(:target) {
      width: 0;
    }
  </style>
  <div class="swiper">
    <div class="img" id="img1" style='background: #06c'>我</div>
    <div class="img" id="img2" style='background: #f0c'>愛</div>
    <div class="img" id="img3" style='background: #000'>你</div>

    <div class="swiperControl">
        <a class="dot" href="#img1"></a>
        <a class="dot" href="#img2"></a>
        <a class="dot" href="#img3"></a>
      </div>
  </div>
複製程式碼

總結

通過上面介紹的純css實現網站換膚以及焦點圖切換動畫,是不是對css有更多的新奇的想法了呢?後面我會繼續介紹更多純css3實現的不可思議的動畫,比如3D擲色子,VR圖等,敬請期待吧~

最後

如果想了解更多webpack，node，gulp，css3，javascript，nodeJS，canvas等前端知識和實戰，歡迎在公眾號《趣談前端》加入我們一起學習討論，共同探索前端的邊界。

《前端實戰總結》之使用純css實現網站換膚和焦點圖切換動畫

更多推薦

相關文章