搜尋

首頁 >web前端 >css教學 >如何利用CSS技術實現下拉框酷炫的特效

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

巴扎黑
巴扎黑原創
2017-05-21 10:35:131667瀏覽

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

首先來看看要實現的效果圖

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

首先，來看看 Html 程式碼。


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

  1. ##<p class="container"#>

  2.     

    <p class="heading"#>

  4.         <#h2>

    Custom Select
    5. #

    ##h2

    > ;

  5.     p>

  6.     <p class=

    "select"
  7. >

            <

    p
  8. >

    Please select<lt//; p>        #<#ul#>

  9.             <li data-value ##>HTML5li#>

                
    10. #<##         
  10. ##;

    #li data-value="CSS3">CSS3#li >            

  11. <

    li data-value#li data-value #"JavaScript">JavaScript#li

    12. >

  12.             <li data-value=#"JQuery"

    13. >##data-value

  13. =

    #"JQuery">#< /li

    >

  14. #            <     

    #<

  15.      #<     #<

    ### -value###=###"Backbone"######>###Backbone######## ##########        #################    ###################    ####################  ;/######p######>##########################

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

以下逐步來看 CSS 程式碼。


CSS Code#複製內容到剪貼簿

  1. ##* {   

  2.     

    margin: 0;   

  3.     

    #padding##: #    

    4.  

  4. #}   

  5.   

  6. html {   

  7. #    #font -family: 'Terminal';   

  8.     font-size: 62.5%;   

  9. }   

  10.   

  11. body {   

  12.     background-colorcolor##    

    #: 
    13. #33CC66
  13. ;   

}  

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

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

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

XML/HTML Code

#複製內容到剪貼簿

  1. <link

     
    2. href
=

'http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis'

 

rel

=

'stylesheet'

 

type

=

'text/css'

>

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

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

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

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

  2. CSS Code

    3. 複製內容到剪貼簿

  3. .select > p, .select ul {   

  4.         background-color: #fffffff##;   #: 

    #ffffff
    5. ;   

  5. ##of ##font-size: 2rem;   

    6. #        
  6. border

    #: 1px 

    solque; # bisque; # bisque;

  7.         

    border
    8. -radius: 
  8. 5px

    ;   

  9.        

  10.      ;       }   

  11.   

    12. .select > p { 

  12. #.select >         text-align

    #: 
    13. left
  13. ;   

            ##1       

  14. ##1

    ##        position#: relative

    ;   

  15.        right-radius: 0;   

    #########        ###border-bottom###-####left###-radius: #0;   # ###########        ###cursor###: ###pointer###;   ####

  16.         color#: rgba(102, 102, 102, .6);   

    17.   
  17. #.select > p:after {   

  18.         

    #display

    : 
  19. ##; 

    display: #; ##        

    width
    20. : 
  20. 10px

    ;           

    21. ##        
  21. content

    #: '';   

    22.         

  22. #       ##;   

            
    23. top
  23. : 1.4rem;   

    1#   : 2rem；

  24.         border-left: 

    1px
    25.  
  25. #solid

     ##33CC66##        transform: rotate(-45deg);   

  26.         trans

    ##    }  #1、設定p 和ul 元素的背景色彩和邊框等設定。 2、為 p 元素單獨指定樣式，並設定其 position 屬性，主要是為了在下面繪製右側的下拉按鈕。

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

  27. CSS Code複製內容到剪貼簿

  28. .select ul {

  29.     

    margin-top: 0;   

  30.     

    border-top

    -
##    

border-top

-

#left

-radius: 0;   


    

border-top

-#right-radius: 0;   

  1. #    

    list-style-type
    2. : 
  2. none

    ;   

    3.     
  3. cursor

    # # : pointer;   

    4.     
  4. overflow

    -y: auto;   

  9. 總是

    ##做什麼#    

    max-height
    10. : 0;   

    11.     transition: 
  11. #max-height

     .3s ease-out；

    #}   

  12.   

  13. .select ul li {   

  14. #    -left

    : 0.5rem;   #    

    display
    15. : 
  15. block

    ;    ##line-height

    : 3rem;   

  16. #    text-align: left

    ;   

################################################################################################################################################11_##le ###}  ############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;   

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

    6. }   

    7.  

  7. .select.open > p:after {   

  8.     position#: absolute;   

  9. #: 

    absolute;   

  12. 1112

    13.     
top

: 1.6rem;   

    transform: rotate(-225deg);   


很難#很難#很難# : transform .3s ease-in, 

#top
     .2s ease-in;   

    2. }  

    3. 1、為open設定最大高度，並為其指定動畫效果。

  3. 2、將下拉按鈕旋轉 -225 度，並為其指定動畫。

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

  5. CSS Code

    6. 複製內容到剪貼簿

  7. @-webkit- keyframes slide-down {   

  8.     0% {   

  9. #     

        }   

  10.     25% {   

  11. #        trans

  12.         trans

  13. 1. ##    }   

  14.     50% {   

  15. #        #    }   

  16.     75% {   

  17.         }   

    100% {   

#        transform: )


}  看到上述程式碼可能就都明白了，就是不斷改變ul 的大小，讓其在0.75-1.25 之間進行縮放，所以就會有那個跳動的效果了。

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

  2. CSS Code複製內容到剪貼簿

  3. .select ul li :hover {   

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

  6. }   

      

  7. .select .selected {   

    

#background-color

##: rgba(102, 153, 102, 0.8);   


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

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

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


<script src

=###"http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"### ###>#####################下面就可以使用JQuery 了。 ##################XML/HTML Code#######複製內容到剪貼簿######

  1. 腳本>  

  2.     $(文檔).ready (function () {   

  3.         $('.select ul li').on("click", function (e) {   

  4. var _this = $(this);   

  5.            att $('.select #>p').text(_this.attr('資料值' ))； $('.select').toggleClass('open');   

  6.            cancelBubble(e);    ##o

    ## 

  7.   

  8.         $('.select

    >
    9. p').on("點選", 函數( e) {   ##p').on("點選", 函數( e) {   

    10. #            $('.select').toggleClass('open');   

    11.    
  11. #        });   

      

  12.         
  13. ##            $('.select').removeClass('open');   

  14.     )   

  15.   

  16.     函數cancelBubble(事件) {   

    17. ##  

    18.             event.preventDefault();   

    19.             event.stopPropagation();   

    20.         } else {   

    21.               

    22.             event.cancelBubble();   

    23.         }   

    24.     }   

  25. #

    script
  26. >

    #  1、先為p標籤綁定點擊事件，在觸發的時候，為選擇新增或刪除開放類，也

    27. 2、為li綁定點擊事件，選出中了一個li元素的時候，首先獲取到data-value，然後將其賦值給p標籤，然後為選中的li添加selected class，同時利用siblings()方法，讓兄弟節點的selected class移除。不過這時候因為所有元素都在文件內，所以我們需要阻止事件冒泡，呼叫自己寫的cancelBubble()方法。好了，本文的內容到此基本介紹了，希望能夠對大家的學習或工作帶來一定的幫助，如果有疑問大家可以留言交流。

以上是如何利用CSS技術實現下拉框酷炫的特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：利用CSS程式碼實現立方體360度旋轉效果實例展示下一篇：利用CSS程式碼實現立方體360度旋轉效果實例展示

相關文章

看更多