技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)
卡卡网是专业的网站测速平台,网速测试,测试网站速度,就来卡卡网 ~
问题反馈网络日志

DiyVM:香港VPS驚爆價(jià)36元一月
★站長(zhǎng)/主播變現(xiàn)★有流量就來
5M CN2 GIA云主機(jī) 24元起
一一一云主機(jī) 26元起一一一
官方高價(jià)收量,每日穩(wěn)定結(jié)算

一一云主機(jī) 24元 3折起一一
海外CN2云 低至$2.5/月
海外云低至2折 298/年
免費(fèi)測(cè)試★APK免殺 谷歌過保護(hù)
官方收量CPA/CPS長(zhǎng)期穩(wěn)定

海外主機(jī) 5M CN2 低至$2/月
恒創(chuàng)科技 一 海外服務(wù)器 ● 高速穩(wěn)定
★解決安裝報(bào)毒★谷歌過保護(hù)機(jī)制
超級(jí)簽★免殺★加固★滿意付款
全球云主機(jī) 3天試用再買

【菠蘿云】香港4G內(nèi)存99元,馬上開通
億人互聯(lián)-津/京BGP托管租用/VPS
蘋果簽名/APP封裝/遠(yuǎn)控免殺
10M CN2海外云VPS 53元/月
CN2 GIA/1000Mbps $111/月

實(shí)力產(chǎn)品變現(xiàn)
實(shí)力產(chǎn)品變現(xiàn)
實(shí)力產(chǎn)品變現(xiàn)
實(shí)力產(chǎn)品變現(xiàn)
實(shí)力產(chǎn)品變現(xiàn)

贊助商

分類目錄

贊助商

最新文章

字体单位是相对测量单位,是根据其他一些值计算的,可以动态变化。与字体相关的测量单...
stroke-width设置形状的描边粗细,如果在 HTML 中,框架是从外边缘...
本文给大家介绍10款用SVG蒙版制作的图片转场/过渡动画,并分析如何实现它们。
CSS 数据类型<filter-function>代表可以改变输入图...
CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个...
drop-shadow() 是一个CSS 过滤器函数,其将投影效果应用于输入图像...
本文给大家介绍一个SVG实现的网页气泡动画效果。 

搜索

實(shí)用!純CSS3實(shí)現(xiàn)的內(nèi)容選項(xiàng)卡(Content Tabs)4個(gè)實(shí)例

作者:admin    時(shí)間:2020-8-1 16:8:44    瀏覽:

之前我做內(nèi)容選項(xiàng)卡(Content Tabs)的時(shí)候,會(huì)用到一些小圖片來區(qū)隔,那樣雖然能達(dá)到理想的效果,但是維護(hù)起來卻不太容易,因?yàn)樾枰膱D片。今天我將介紹用純CSS3實(shí)現(xiàn)的內(nèi)容選項(xiàng)卡(Content Tabs)4個(gè)實(shí)例,在本教程中,我們將使用單選按鈕以及:checked偽類和同級(jí)組合器來實(shí)現(xiàn)一些簡(jiǎn)單的CSS3內(nèi)容選項(xiàng)卡,效果很好,非常實(shí)用,值得收藏。

純CSS3實(shí)現(xiàn)的內(nèi)容選項(xiàng)卡(Content Tabs)

純CSS3實(shí)現(xiàn)的內(nèi)容選項(xiàng)卡(Content Tabs)

demo

內(nèi)容選項(xiàng)卡是Web設(shè)計(jì)中非常常見且熟悉的元素,通常它們非常有用。

實(shí)例一

demodownload

實(shí)例二

demodownload

實(shí)例三

 

demodownload

 實(shí)例四

 

demodownload

標(biāo)記

我們將使用input元素連接具有類內(nèi)容(class content)的分隔。內(nèi)容分隔包括所有“標(biāo)簽頁(tab pages)”。對(duì)于每個(gè)input元素,我們將有一個(gè)label元素。所有標(biāo)簽的樣式將類似于標(biāo)簽。

  1. <section class="tabs">
  2. <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
  3. <label for="tab-1" class="tab-label-1">關(guān)于我們</label>
  4. <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
  5. <label for="tab-2" class="tab-label-2">聯(lián)系方式</label>
  6. <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
  7. <label for="tab-3" class="tab-label-3">廣告服務(wù)</label>
  8. <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
  9. <label for="tab-4" class="tab-label-4">免責(zé)聲明</label>
  10.             
  11. <div class="clear-shadow"></div>
  12. <div class="content">
  13. <div class="content-1">
  14.             <p>Some content</p>
  15. </div>
  16. <div class="content-2">
  17.             <p>Some content</p>
  18. </div>
  19. <div class="content-3">
  20.             <p>Some content</p>
  21. </div>
  22. <div class="content-4">
  23.             <p>Some content</p>
  24. </div>
  25. </div>
  26. </section>

每個(gè)input元素都有一個(gè)值,我們可以通過添加checked的屬性來使input默認(rèn)為選中狀態(tài)。

CSS

我們需要做的第一件事是定義一些尺寸并通過將input的不透明度設(shè)置為0來隱藏它們:

  1. tabs {
  2. position: relative;
  3. margin: 40px auto;
  4. width: 750px;
  5. }
  6.  
  7. .tabs input {
  8. position: absolute;
  9. z-index: 1000;
  10. width: 120px;
  11. height: 40px;
  12. left: 0px;
  13. top: 0px;
  14. opacity: 0;
  15. cursor: pointer;
  16. }
  17. .tabs input#tab-2{
  18. left: 120px;
  19. }
  20. .tabs input#tab-3{
  21. left: 240px;
  22. }
  23. .tabs input#tab-4{
  24. left: 360px;
  25. }

input將覆蓋label,看起來好像我們單擊了標(biāo)簽(label),但實(shí)際上我們正在單擊輸入(input),這是一個(gè)技巧,也可以在移動(dòng)瀏覽器中使用。

接下來,通過為標(biāo)簽(label)定義一些整潔的樣式,使標(biāo)簽看起來像標(biāo)簽。請(qǐng)注意,每個(gè)標(biāo)簽都有不同的z-index。盒子陰影將為選項(xiàng)卡增加深度和真實(shí)感。

  1. .tabs label {
  2. background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
  3. font-size: 15px;
  4. line-height: 40px;
  5. height: 40px;
  6. position: relative;
  7. padding: 0 20px;
  8. float: left;
  9. display: block;
  10. width: 80px;
  11. color: #385c5b;
  12. letter-spacing: 1px;
  13. text-transform: uppercase;
  14. font-weight: bold;
  15. text-align: center;
  16. text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
  17. border-radius: 3px 3px 0 0;
  18. box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
  19. }
  20.  
  21. .tabs input:hover + label {
  22. background: #5ba4a4;
  23. }
  24.  
  25. .tabs label:first-of-type {
  26. z-index: 4;
  27. box-shadow: 2px 0 2px rgba(0,0,0,0.1);
  28. }
  29.  
  30. .tab-label-2 {
  31. z-index: 3;
  32. }
  33.  
  34. .tab-label-3 {
  35. z-index: 2;
  36. }
  37.  
  38. .tab-label-4 {
  39. z-index: 1;
  40. }

由于我們不希望顯示框陰影的底部,因此我們將使用:after偽元素將其覆蓋,其中不包含任何內(nèi)容:

  1. .tabs label:after {
  2. content: '';
  3. background: #fff;
  4. position: absolute;
  5. bottom: -2px;
  6. left: 0;
  7. width: 100%;
  8. height: 2px;
  9. display: block;
  10. }

當(dāng)我們單擊一個(gè)選項(xiàng)卡(label)時(shí),它的樣式和顏色將與其他樣式不同,重要的是要確保“已選中(checked)”標(biāo)簽將位于選項(xiàng)卡中所有其他層的頂部。因此,我們將為其賦予最高的z-index

  1. .tabs input:checked + label {
  2.   background: #fff;
  3.   z-index: 6;
  4. }

如前所述,內(nèi)容分區(qū)將包含所有標(biāo)簽頁,我們將其z-index設(shè)置為5,使其在所選標(biāo)簽下。這樣,內(nèi)容區(qū)域的盒子陰影將覆蓋所有其他標(biāo)簽。

在內(nèi)容區(qū)域內(nèi),有四個(gè)分區(qū),每個(gè)分區(qū)都有自己的內(nèi)容。默認(rèn)情況下(當(dāng)未選擇/單擊它們各自的標(biāo)簽時(shí)),我們希望它們被隱藏。因此,我們將不透明度設(shè)置為零,將z-index設(shè)置為1。我們不能使用display:none屬性,因?yàn)?strong>transitions不支持該屬性。

  1. .content {
  2.   background: #fff;
  3.   position: relative;
  4.   width: 100%;
  5.   height: 370px;
  6.   z-index: 5;
  7.   box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
  8.   border-radius: 0 3px 3px 3px;
  9. }
  10.  
  11. .content div {
  12.   position: absolute;
  13.   top: 0;
  14.   left: 0;
  15.   padding: 10px 40px;
  16.   z-index: 1;
  17.   opacity: 0;
  18.   transition: all linear 0.1s;
  19. }
  20.  
  21. .content div h2,
  22. .content div h3{
  23.   color: #398080;
  24. }
  25. .content div p {
  26.   font-size: 14px;
  27.   line-height: 22px;
  28.   font-style: italic;
  29.   text-align: left;
  30.   margin: 0;
  31.   color: #777;
  32.   padding-left: 15px;
  33.   font-family: Cambria, Georgia, serif;
  34.   border-left: 8px solid rgba(63,148,148, 0.1);
  35. }

當(dāng)我們希望某個(gè)內(nèi)容出現(xiàn)(單擊標(biāo)簽)時(shí),我們將不透明度設(shè)置為1并提高z-index,因?yàn)槲覀兿M搩?nèi)容劃分位于所有其他內(nèi)容之上:

  1. .tabs input.tab-selector-1:checked ~ .content .content-1,
  2. .tabs input.tab-selector-2:checked ~ .content .content-2,
  3. .tabs input.tab-selector-3:checked ~ .content .content-3,
  4. .tabs input.tab-selector-4:checked ~ .content .content-4 {
  5.   z-index: 100;
  6.   opacity: 1;
  7.   transition: all ease-out 0.2s 0.1s;
  8. }

在本教程中,介紹了將內(nèi)容淡入/淡出的基本示例。您可以在演示中找到更多樣式和效果。

x
廣告: CN2云主機(jī) 免費(fèi)試用