建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
你將收獲
- 網(wǎng)站換膚設(shè)計(jì)方案介紹
- target偽類(lèi)介紹和用法以及如何使用css實(shí)現(xiàn)網(wǎng)站換膚
- transition動(dòng)畫(huà)以及如何用純css實(shí)現(xiàn)焦點(diǎn)圖動(dòng)畫(huà)
效果展示
1.網(wǎng)站換膚
2.焦點(diǎn)圖動(dòng)畫(huà)
實(shí)現(xiàn)思路
1.網(wǎng)站換膚
通常我們實(shí)現(xiàn)網(wǎng)站換膚都基于如下方式實(shí)現(xiàn):
- 方案一: 使用OOCSS模式,通過(guò)js動(dòng)態(tài)切換公共類(lèi)名來(lái)達(dá)到換膚效果
- 方案二: 點(diǎn)擊不同的按鈕切換不同的樣式表,如下:?theme-green.css?theme-red.css?theme-black.css
- 方案三: localStorage存儲(chǔ)主題,js動(dòng)態(tài)獲取本地存儲(chǔ)換膚
- 方案四: element和antd的動(dòng)態(tài)換膚,需要實(shí)時(shí)編譯style樣式表
以上幾個(gè)方案都可以實(shí)現(xiàn)一定程度上的換膚效果,但是如果是一些基礎(chǔ)性的換膚,比如網(wǎng)站的背景樣式,某個(gè)按鈕的樣式,某塊內(nèi)容區(qū)域的樣式等等這種局部的換膚,我們能不能直接用css來(lái)實(shí)現(xiàn)呢?答案是可以的,接下來(lái)我們就來(lái)看純看css如何實(shí)現(xiàn)網(wǎng)站換膚。
在實(shí)現(xiàn)換膚之前,我們需要了解一個(gè)知識(shí)點(diǎn),那就是a標(biāo)簽的:target偽類(lèi)。
:target偽類(lèi)
為了輔助標(biāo)識(shí)那些指向文檔特定部分鏈接的目標(biāo), CSS3 選擇器 引入了 :target 偽類(lèi). :target 偽類(lèi)用來(lái)指定那些包含片段標(biāo)識(shí)符的 URI 的目標(biāo)元素樣式。
例如, http://xuxi#home , 這個(gè) URI 包含了 #home 片段標(biāo)識(shí)符。在HTML中, 標(biāo)識(shí)符是元素的id或者name屬性,。由于這兩者位于相同的命名空間，因此，這個(gè)示例 URI 指向的是文檔頂層的 "home" 。
假設(shè)你想修改 URI 指向的任何 div 元素，但是又不想把樣式應(yīng)用到任何其它同類(lèi)型的元素，那么我們可以這么寫(xiě)：
藍(lán)
此時(shí)當(dāng)我們點(diǎn)擊a標(biāo)簽時(shí),會(huì)命中:target的元素,這個(gè)時(shí)候會(huì)將div的背景色設(shè)置為藍(lán)色,即#06c。
了解這個(gè)偽類(lèi)之后,我們的網(wǎng)站換膚就很容易實(shí)現(xiàn)了,比如說(shuō)我們要實(shí)現(xiàn)網(wǎng)站背景色的換膚,我們可以預(yù)先準(zhǔn)備幾個(gè)背景色的容器, 然后用a標(biāo)簽的href錨點(diǎn)分別對(duì)應(yīng)相應(yīng)的背景元素id,然后當(dāng)點(diǎn)擊背景色的時(shí)候調(diào)整背景容器的層級(jí),這樣就可以實(shí)現(xiàn)換膚了,實(shí)際效果可以看文章開(kāi)頭的效果展示。具體代碼如下:
2.焦點(diǎn)圖動(dòng)畫(huà)
焦點(diǎn)圖動(dòng)畫(huà)主要來(lái)自我們司空見(jiàn)慣的輪播圖,我們點(diǎn)擊輪播圖的某個(gè)指示點(diǎn)時(shí),可以切換會(huì)對(duì)應(yīng)的圖片,焦點(diǎn)輪播圖常用的方案主要是用javascript和css共同實(shí)現(xiàn),方案有大致以下幾種:
- bootstrap的輪播圖插件
- jquery市場(chǎng)的豐富的輪播圖插件?swiper.js(豐富而強(qiáng)大,小程序也內(nèi)置了swiper組件)?antd/element內(nèi)置輪播圖組件
- slick?unslider 最簡(jiǎn)單的輪播圖組件?fancyBox 可以為頁(yè)面上的圖片、html 內(nèi)容和多媒體添加縮放功能
- sly 導(dǎo)航式、可單向滾動(dòng)
- Sequence 可以創(chuàng)建響應(yīng)式幻燈片、演示、旗幟廣告和以步驟為基礎(chǔ)的CSS 動(dòng)畫(huà)框架
- PhotoSwipe 適用于移動(dòng)設(shè)備和桌面電腦,基于原生JavaScript的模塊組件
以上介紹的方案都很成熟,我們可以直接拿來(lái)使用,但是為了追求簡(jiǎn)潔和代碼量最低,我們有辦法用純css實(shí)現(xiàn)一個(gè)簡(jiǎn)單的焦點(diǎn)圖切換動(dòng)畫(huà)嗎?
實(shí)現(xiàn)思路如下:
1.建立焦點(diǎn)圖和控制點(diǎn)的對(duì)應(yīng)關(guān)系
2.初始化頁(yè)面時(shí)只讓第一個(gè)焦點(diǎn)圖有寬度,其他寬度都設(shè)置為零,當(dāng)控制點(diǎn)激活時(shí),然控制點(diǎn)對(duì)應(yīng)的目標(biāo)對(duì)象的寬度設(shè)置為正常值,其他的非目標(biāo)對(duì)象都設(shè)置為零
3.給焦點(diǎn)圖添加transition過(guò)渡動(dòng)畫(huà)4.優(yōu)化焦點(diǎn)圖和控制點(diǎn)樣式
具體代碼如下:
總結(jié)
通過(guò)上面介紹的純css實(shí)現(xiàn)網(wǎng)站換膚以及焦點(diǎn)圖切換動(dòng)畫(huà),是不是對(duì)css有更多的新奇的想法了呢?后面我會(huì)繼續(xù)介紹更多純css3實(shí)現(xiàn)的不可思議的動(dòng)畫(huà),比如3D擲色子,VR圖等,敬請(qǐng)期待吧~
當(dāng)前標(biāo)題：使用純Css實(shí)現(xiàn)網(wǎng)站換膚和焦點(diǎn)圖切換動(dòng)畫(huà)
網(wǎng)頁(yè)網(wǎng)址：http://www.5511xx.com/article/djdispp.html
