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

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

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

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

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

首先，來看看 Html 代碼。

XML/HTML Code復制內(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 元素，而是利用其它元素來模擬這個效果。我們?yōu)?li 元素指定了 data-value,主要是接下來我們會用 JQuery 獲取選中值并將其放置到 p 元素下。

下面逐步來看 CSS 代碼。

CSS Code復制內(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)邊距設置為 0。

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

3、設置背景顏色為 #33CC66。

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

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

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

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

3、設置 heading 下 h2 元素的字體和字體大小，顏色。

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

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

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

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

CSS Code復制內(nèi)容到剪貼板
  1. .select ul {   
  2.     margin-top: 0;   
  3.     border-top-left-radius: 0;   
  4.     border-top-rightright-radius: 0;   
  5.     list-style-type: none;   
  6.     cursor: pointer;   
  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.     display: block;   
  15.     line-height: 3rem;   
  16.     text-align: left;   
  17. }  

1、設置 ul 的一些默認屬性，并將其設置最大寬度為 0，指定 overflow-y 為 auto ，這個時候ul 將會被隱藏。

2、在這里設置的時候我遇到了一個問題，就是 li 標簽始終占不滿 ul 的一行，那是因為其默認有 margin 和 padding ，所以在一開始的時候就將網(wǎng)頁中所有元素的外邊距和內(nèi)邊距設置成了 0。

CSS Code復制內(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.     position: absolute;   
  9.     top: 1.6rem;   
  10.     transform: rotate(-225deg);   
  11.     transition: transform .3s ease-in, top .2s ease-in;   
  12. }  

1、為 open 設置最大高度，并為其指定動畫效果。

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

下面我們看看為 ul 元素指定的 slide-down 動畫效果，這也是這個下拉特效的關鍵所在。

CSS Code復制內(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 之間進行縮放，所以就會有那個跳動的效果了。

下面還有一些簡單的 CSS 代碼，不再解釋。

CSS Code復制內(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 控制這個效果的。

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

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

下面就可以使用 JQuery 了。

XML/HTML Code復制內(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 標簽綁定 click 事件，在觸發(fā)的時候，為 select 添加或移除 open class, 也就是將 ul 顯示出來。

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

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

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

相關文章

最新評論