如何利用CSS技術實現下拉框酷炫的特效

這篇文章給大家介紹的是一個利用CSS實現的酷炫的下拉框，實現後效果真的非常不錯，文中給出了詳細實現過程和範例程式碼，感興趣的朋友們下面來一起看看吧。

首先來看看要實現的

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

首先，來看看 Html 代碼。

XML/HTML Code複製內容到剪貼簿

1. <p class="container">

2. <p class="heading">

3. <h2>Custom Select</h2>

4. </p>

5. 
   

6. <p 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. </p>

16. </p>

可見，我們並沒有利用原生的 select 元素，而是利用其它元素來類比這個效果。我們為 li 元素指定了 data-value,主要是接下來我們會用 JQuery 擷取選中值並將其放置到 p 元素下。

下面逐步來看 CSS 代碼。

CSS Code複製內容到剪貼簿

1. * {

2. margin: 0;

3. padding: 0;

4. }

6. html {

7. font-family: 'Terminal';

8. font-size: 62.5%;

9. }

11. body {

12. background-color: #33CC66;

13. }

1、將網頁中所有元素的外邊距和內邊距設定為 0。

2、將網頁中的預設字型設定為 Terminal，字型大小設定為 62.5%, 也就是 10px。

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

XML/HTML Code複製內容到剪貼簿

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複製內容到剪貼簿

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. }

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 屬性，主要是為了下面繪製右側的下拉按鈕。

3、利用 :after 在p 元素的右方繪製下拉按鈕，可以看出來，我們是利用左下邊框然後旋轉 -45 度 類比的這個效果。值得注意的是，我們需要將其 display 設定為 block，並且設定寬高，否則看不到 這個效果。

CSS Code複製內容到剪貼簿

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. }

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 ，所以在一開始的時候就將網頁中所有元素的外邊距和內邊距設定成了 0。

CSS Code複製內容到剪貼簿

1. .select.open ul {

2. max-height: 20rem;

3. transform-origin: 50% 0;

4. -webkit-animation: slide-down .5s ease-in;

5. }

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、將下拉按鈕旋轉 -225 度，並為其指定動畫。

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

CSS Code複製內容到剪貼簿

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複製內容到剪貼簿

1. .select ul li:hover {

2. background-color: rgba(102, 153, 102, 0.4);

3. }

5. .select .selected {

6. background-color: rgba(102, 153, 102, 0.8);

7. }

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

我們並不需要下載 JQuery 就可以使用，因為現在已經有很多網站提供了 CDN 服務，比如我使用的 BootCDN。

XML/HTML Code複製內容到剪貼簿

1. <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

下面就可以使用 JQuery 了。

XML/HTML Code複製內容到剪貼簿

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. });

11. $('.select>p').on("click", function (e) {

12. $('.select').toggleClass('open');

13. cancelBubble(e);

14. });

16. $(document).on('click', function () {

17. $('.select').removeClass('open');

18. })

19. })

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 事件，在觸發的時候，為 select 添加或移除 open class, 也就是將 ul 顯示出來。

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

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

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