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

時間 2019-12-28

標籤前端實戰總結使用 css 實現網站焦點切換動畫欄目 CSS 简体版

原文原文鏈接

今天咱們來繼續覆盤一些工做中經常使用的css技巧和知識,以便咱們能夠更加優雅的用css實現富有動感的網站.javascript

你將收穫

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

效果展現

1.網站換膚 css

2.焦點圖動畫

實現思路

1.網站換膚

一般咱們實現網站換膚都基於以下方式實現:html

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

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

在實現換膚以前,咱們須要瞭解一個知識點,那就是a標籤的:target僞類.vue

:target僞類

爲了輔助標識那些指向文檔特定部分連接的目標, CSS3 選擇器引入了 :target 僞類. :target 僞類用來指定那些包含片斷標識符的 URI 的目標元素樣式。java

例如, http://xuxi#home , 這個 URI 包含了 #home 片斷標識符。在HTML中, 標識符是元素的id或者name屬性,。因爲這二者位於相同的命名空間，所以，這個示例 URI 指向的是文檔頂層的 "home" 。node

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

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

此時當咱們點擊a標籤時,會命中:target的元素,這個時候會將div的背景色設置爲藍色,即#06c.webpack

瞭解這個僞類以後,咱們的網站換膚就很容易實現了,好比說咱們要實現網站背景色的換膚,咱們能夠預先準備幾個背景色的容器, 而後用a標籤的href錨點分別對應相應的背景元素id,而後當點擊背景色的時候調整背景容器的層級,這樣就能夠實現換膚了,實際效果能夠看文章開頭的效果展現. 具體代碼以下:css3

<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和僞元素的更多介紹和使用,能夠參考:

實現思路以下:

創建焦點圖和控制點的對應關係
初始化頁面時只讓第一個焦點圖有寬度,其餘寬度都設置爲零,當控制點激活時,然控制點對應的目標對象的寬度設置爲正常值,其餘的非目標對象都設置爲零
給焦點圖添加transition過渡動畫
優化焦點圖和控制點樣式

具體代碼以下:

<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實現網站換膚和焦點圖切換動畫

你將收穫

效果展現

實現思路

1.網站換膚

:target僞類

2.焦點圖動畫

總結

最後

更多推薦