欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用CSS實(shí)現(xiàn)酷炫的下拉框特效

  發(fā)布時(shí)間:2016-10-20 17:26:40   作者:佚名   我要評(píng)論
這篇文章給大家介紹的是一個(gè)利用CSS實(shí)現(xiàn)的酷炫的下拉框,實(shí)現(xiàn)后效果真的非常不錯(cuò),文中給出了詳細(xì)實(shí)現(xiàn)過程和示例代碼,感興趣的朋友們下面來一起看看吧。

首先來看看要實(shí)現(xiàn)的效果圖

想要制作這么一個(gè)效果還是比較麻煩的,但是代碼并不難理解。

首先,來看看 Html 代碼。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="container">  
  2.     <div class="heading">  
  3.         <h2>Custom Select</h2>  
  4.     </div>  
  5.   
  6.     <div class="select">  
  7.         <p>Please select</p>  
  8.         <ul>  
  9.             <li data-value="HTML5">HTML5</li>  
  10.             <li data-value="CSS3">CSS3</li>  
  11.             <li data-value="JavaScript">JavaScript</li>  
  12.             <li data-value="JQuery">JQuery</li>  
  13.             <li data-value="Backbone">Backbone</li>  
  14.         </ul>  
  15.     </div>  
  16. </div>  

可見,我們并沒有利用原生的 select 元素,而是利用其它元素來模擬這個(gè)效果。我們?yōu)?li 元素指定了 data-value,主要是接下來我們會(huì)用 JQuery 獲取選中值并將其放置到 p 元素下。

下面逐步來看 CSS 代碼。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. * {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }   
  5.   
  6. html {   
  7.     font-family'Terminal';   
  8.     font-size: 62.5%;   
  9. }   
  10.   
  11. body {   
  12.     background-color#33CC66;   
  13. }  

1、將網(wǎng)頁中所有元素的外邊距和內(nèi)邊距設(shè)置為 0。

2、將網(wǎng)頁中的默認(rèn)字體設(shè)置為 Terminal,字體大小設(shè)置為 62.5%, 也就是 10px。

3、設(shè)置背景顏色為 #33CC66。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <link href='http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis' rel='stylesheet' type='text/css'>  

上面我們用到了 Terminal 字體,而且接下來我們還會(huì)使用 Lobster 字體,所以用這行代碼添加引用。

1、指定 headng, select 寬度并指定其水平居中。

2、修改 heading 的寬度,主要是為了讓其寬度大于 select 的寬度,顯得更加美觀。然后指定其上外邊距和下外邊距。

3、設(shè)置 heading 下 h2 元素的字體和字體大小,顏色。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .select > p, .select ul {   
  2.         background-color#ffffff;   
  3.         font-size: 2rem;   
  4.         border1px solid bisque;   
  5.         border-radius: 5px;   
  6.         margin-bottom: 0;   
  7.     }   
  8.   
  9. .select > p {   
  10.         text-alignleft;   
  11.         padding: 1rem;   
  12.         positionrelative;   
  13.         border-bottom-rightright-radius: 0;   
  14.         border-bottom-left-radius: 0;   
  15.         cursorpointer;   
  16.         color: rgba(102, 102, 102, .6);   
  17.     }   
  18. .select > p:after {   
  19.         displayblock;   
  20.         width10px;   
  21.         height10px;   
  22.         content'';   
  23.         positionabsolute;   
  24.         top: 1.4rem;   
  25.         rightright: 2rem;   
  26.         border-bottom1px solid #33CC66;   
  27.         border-left1px solid #33CC66;   
  28.         transform: rotate(-45deg);   
  29.         transition: transform .3s ease-out, top .2s ease-out;   
  30.     }  

1、設(shè)置 p 和 ul 元素的背景顏色和邊框等設(shè)置。

2、為 p 元素單獨(dú)指定樣式,并設(shè)置其 position 屬性,主要是為了下面繪制右側(cè)的下拉按鈕。

3、利用 :after 在p 元素的右方繪制下拉按鈕,可以看出來,我們是利用左下邊框然后旋轉(zhuǎn) -45 度 模擬的這個(gè)效果。值得注意的是,我們需要將其  display 設(shè)置為 block,并且設(shè)置寬高,否則看不到 這個(gè)效果。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .select ul {   
  2.     margin-top: 0;   
  3.     border-top-left-radius: 0;   
  4.     border-top-rightright-radius: 0;   
  5.     list-style-typenone;   
  6.     cursorpointer;   
  7.     overflow-y: auto;   
  8.     max-height: 0;   
  9.     transition: max-height .3s ease-out;   
  10. }   
  11.   
  12. .select ul li {   
  13.     padding-left: 0.5rem;   
  14.     displayblock;   
  15.     line-height: 3rem;   
  16.     text-alignleft;   
  17. }  

1、設(shè)置 ul 的一些默認(rèn)屬性,并將其設(shè)置最大寬度為 0,指定 overflow-y 為 auto ,這個(gè)時(shí)候ul 將會(huì)被隱藏。

2、在這里設(shè)置的時(shí)候我遇到了一個(gè)問題,就是 li 標(biāo)簽始終占不滿 ul 的一行,那是因?yàn)槠淠J(rèn)有 margin 和 padding ,所以在一開始的時(shí)候就將網(wǎng)頁中所有元素的外邊距和內(nèi)邊距設(shè)置成了 0。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .select.open ul {   
  2.     max-height: 20rem;   
  3.     transform-origin: 50% 0;   
  4.     -webkit-animation: slide-down .5s ease-in;   
  5. }   
  6.   
  7. .select.open > p:after {   
  8.     positionabsolute;   
  9.     top: 1.6rem;   
  10.     transform: rotate(-225deg);   
  11.     transition: transform .3s ease-in, top .2s ease-in;   
  12. }  

1、為 open 設(shè)置最大高度,并為其指定動(dòng)畫效果。

2、將下拉按鈕旋轉(zhuǎn) -225 度,并為其指定動(dòng)畫。

下面我們看看為 ul 元素指定的 slide-down 動(dòng)畫效果,這也是這個(gè)下拉特效的關(guān)鍵所在。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @-webkit-keyframes slide-down {   
  2.     0% {   
  3.         transform: scale(1, 0);   
  4.     }   
  5.     25% {   
  6.         transform: scale(1, 1.25);   
  7.     }   
  8.     50% {   
  9.         transform: scale(1, 0.75);   
  10.     }   
  11.     75% {   
  12.         transform: scale(1, 1.1);   
  13.     }   
  14.     100% {   
  15.         transform: scale(1, 1);   
  16.     }   
  17. }  

看到以上代碼可能就都明白了,就是不斷改變 ul 的大小,讓其在 0.75-1.25 之間進(jìn)行縮放,所以就會(huì)有那個(gè)跳動(dòng)的效果了。

下面還有一些簡(jiǎn)單的 CSS 代碼,不再解釋。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .select ul li:hover {   
  2.     background-color: rgba(102, 153, 102, 0.4);   
  3. }   
  4.   
  5. .select .selected {   
  6.     background-color: rgba(102, 153, 102, 0.8);   
  7. }  

CSS 講完了,下面就可以看看我們是如何利用 JQuery 控制這個(gè)效果的。

我們并不需要下載 JQuery 就可以使用,因?yàn)楝F(xiàn)在已經(jīng)有很多網(wǎng)站提供了  CDN 服務(wù),比如我使用的 BootCDN。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>  

下面就可以使用 JQuery 了。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <script>  
  2.     $(document).ready(function () {   
  3.         $('.select ul li').on("click", function (e) {   
  4.             var _this = $(this);   
  5.             $('.select >p').text(_this.attr('data-value'));   
  6.             $(_this).addClass('selected').siblings().removeClass('selected');   
  7.             $('.select').toggleClass('open');   
  8.             cancelBubble(e);   
  9.         });   
  10.   
  11.         $('.select>p').on("click", function (e) {   
  12.             $('.select').toggleClass('open');   
  13.             cancelBubble(e);   
  14.         });   
  15.   
  16.         $(document).on('click', function () {   
  17.             $('.select').removeClass('open');   
  18.         })   
  19.     })   
  20.   
  21.     function cancelBubble(event) {   
  22.         if (event.stopPropagation) {   
  23.             event.preventDefault();   
  24.             event.stopPropagation();   
  25.         } else {   
  26.             event.returnValue = false;   
  27.             event.cancelBubble();   
  28.         }   
  29.     }   
  30. </script>  

1、首先為 p 標(biāo)簽綁定 click 事件,在觸發(fā)的時(shí)候,為 select 添加或移除 open class, 也就是將 ul 顯示出來。

2、為 li 綁定 click 事件,當(dāng)選中了一個(gè) li 元素的時(shí)候,首先獲取到 data-value,然后將其賦值給 p 標(biāo)簽,然后為選中的 li 添加 selected class,與此同時(shí)利用 siblings() 方法,讓兄弟節(jié)點(diǎn)的 selected class 移除。

3、為 document 設(shè)置click 事件,當(dāng)我們點(diǎn)擊網(wǎng)頁中任何一處地方的時(shí)候,如果 ul 是打開的,就將其關(guān)閉,不過這個(gè)時(shí)候由于所有元素都在 document 內(nèi),所以我們需要阻止事件冒泡,調(diào)用自己寫的 cancelBubble() 方法。

總結(jié)
好了,本文的內(nèi)容到這就基本介紹了,希望能對(duì)大家的學(xué)習(xí)或者工作帶來一定的幫助,如果有疑問大家可以留言交流。

相關(guān)文章

最新評(píng)論