So erzielen Sie mithilfe der CSS-Technologie coole Spezialeffekte in Dropdown-Boxen

Dieser Artikel stellt Ihnen eine coole Dropdown-Box vor, die mit CSS implementiert wurde. Der detaillierte Implementierungsprozess und der Beispielcode finden Sie im folgenden Artikel ein Blick.

Werfen wir zunächst einen Blick auf die zu erreichenden Renderings

Das möchte ich Machen Sie einen solchen Der Effekt ist immer noch umständlich, aber der Code ist nicht schwer zu verstehen.

Werfen wir zunächst einen Blick auf den HTML-Code.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <p class="container">

2.  <p class="heading">

3.  <h2>Benutzerdefiniert auswählenh2> ;

4.  p>

5. 
   

6.  <p Klasse="select">

7.  <p>Bitte auswählenp>

8.                 <

li

9. data-value="HTML5">HTML5li > 🎜>li

Datenwert
10. =

    "CSS3">CSS3li >                                      > JavaScript" >JavaScript

11. li

    >     <li data-value="JQuery">JQuery< /

12. li

    >    <li Datenwert="Backbone">Backbone

13. li

    >  ul> ;/

p

14. >

p

15. >

Es ist ersichtlich, dass wir nicht das native Select-Element verwenden, sondern andere Elemente verwenden, um diesen Effekt zu simulieren. Wir haben den Datenwert für das li-Element angegeben, hauptsächlich weil wir JQuery verwenden werden, um den ausgewählten Wert abzurufen und ihn unter dem p-Element zu platzieren.

Sehen wir uns den CSS-Code Schritt für Schritt an.

CSS-CodeInhalt in die Zwischenablage kopieren

1. * {

2. Rand: 0;

3. Auffüllung: 0;

4. }

6. html {

7. Schriftart - Familie: 'Terminal';

8. }

10. Körper {

11. Hintergrundfarbe

    :
#33CC66
12. ;

    } Auf 0 setzen.

    2. Stellen Sie die Standardschriftart auf der Webseite auf Terminal und die Schriftgröße auf 62,5 %, also 10 Pixel, ein.
13. 3. Stellen Sie die Hintergrundfarbe auf #33CC66 ein.

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

<link href

=

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

1. rel='stylesheet' type='text/css'> Wir haben oben die Terminal-Schriftart verwendet und werden als Nächstes auch die Lobster-Schriftart verwenden. Verwenden Sie daher diese Codezeile, um eine Referenz hinzuzufügen. 1. Geben Sie den Kopf an, wählen Sie die Breite und legen Sie die horizontale Zentrierung fest. 2. Ändern Sie die Breite der Überschrift, hauptsächlich um sie breiter als ausgewählt zu machen und schöner auszusehen. Geben Sie dann den oberen und unteren Rand an.

   3. Legen Sie die Schriftart, Schriftgröße und Farbe des h2-Elements unter der Überschrift fest.
   CSS-Code
   Inhalt in die Zwischenablage kopieren

   
   

   .wählen Sie > , .select ul {

   Hintergrundfarbe

   :
   #ffffff
   1. ;

   2. 🎜>Schriftgröße: 2rem;

   3.  Rahmen-Radius:

      5px
   ;

   4.  margin-bottom: 0 ; 

                                                        

   5. Textausrichtung: links;

   6. Polsterung: 1rem; 🎜>:

      relativ
   ;
    
   8. Rand unten

      -

      rechts
   9. rechts

      -Radius: 0;

   10. 🎜> Cursor

       :
   Zeiger
   11. ; 

   12.         Farbe: rgba(102, 102, 102, .6);   

   13.     }   

   14. .select > p:after {   

   15.         display: block;   

   16.         Breite: 10px;   

   17.         Höhe: 10px;   

   18.         Inhalt: '';   

   19.         Position: absolut;   

   20.         oben: 1.4rem;   

   21.         richtigrichtig: 2rem;   

   22.         border-bottom: 1px solid #33CC66;   

   23.         border-left: 1px solid #33CC66;   

   24.         transformieren: rotate(-45deg);   

   25.         Übergang: transform .3s ease-out, top .2s ease-out;   

   26. }

   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: Zeiger;   

   7.     Überlauf-y: auto;   

   8.     maximale Höhe: 0;   

   9.     Übergang: max-height .3s ease-out;   

   10. }   

   11.   

   12. .select ul li {   

   13.     padding-left: 0.5rem;   

   14.     Anzeige: Blockieren;   

   15.     Linienhöhe: 3rem;   

   16.     text-align: left;   

   17. }  

   1、设置 ul 的一些默认属性，并将其设置最大宽度为 0，指定 overflow-y.为 auto,这个时候ul 将会被隐藏.

   2、在这里设置的时候我遇到了一个问题，就是 li. 标签始终占不满ul 的一行,那是因为其默认有 margin 和 padding,所以在一开始的时候就将网页中所有元素的外边距和内边距设置成了 0.

   
   

   CSS-CodeInhalt in die Zwischenablage kopieren

   1. .select.open ul { 

   2.  

      max-height: 20rem; 

   3. transform-origin: 50% 🎜>

      -webkit- Animation: 0,5 Sekunden nach unten schieben

   4. }

   6. .select .open > p:after {

    
   8. top

      : 1.6rem;  transform : drehen (-225 Grad); 

   9. Übergang: 0,3 Sekunden Einzug, oben 0,2 Sekunden Einzug;

   10. }

   11. 1 ist geöffnet. Stellen Sie die maximale Höhe ein und animieren Sie sie. 2. Drehen Sie die Dropdown-Schaltfläche um -225 Grad und weisen Sie ihr eine Animation zu.

   Werfen wir einen Blick auf den für das ul-Element angegebenen Slide-Down-Animationseffekt, der auch der Schlüssel zu diesem Dropdown-Effekt ist.

   CSS-Code

   Inhalt in die Zwischenablage kopieren

   
   @-webkit- Keyframes slide-down {

   0% {

   transform: scale(1, 0);
   }                                                                                                                               🎜>}
   50 %{
   Transformation: Skala (1, 0,75);

   4. > }

   5. 75 % { 

   6.                                                                                                }

   7. 100 % {

   8. transform: scale(1, 1);

   9. }

   10. }

   11. Sie verstehen es vielleicht, nachdem Sie den obigen Code gesehen haben, der darin besteht, die Größe von ul ständig so zu ändern, dass sie zwischen 0,75 und 1,25 liegt. Skalieren Sie es, damit es diesen Sprungeffekt hat.

   Im Folgenden finden Sie einige einfache CSS-Codes, die ich nicht weiter erläutern werde.

   13. CSS-Code

   Inhalt in die Zwischenablage kopieren
   15. .select ul li: hover {

   16. Hintergrundfarbe

       : rgba(102, 153, 102, 0.4);

   17. }

   
   .select .selected {

   Hintergrundfarbe: rgba (102, 153, 102, 0,8);

   1. }

   2. CSS Jetzt, wo wir fertig sind, schauen wir uns an, wie wir Verwenden Sie JQuery, um diesen Effekt zu steuern. Wir müssen JQuery nicht herunterladen, um es zu verwenden, da viele Websites mittlerweile CDN-Dienste anbieten, wie zum Beispiel das BootCDN, das ich verwende.

   XML/HTML-Code

   4. Inhalt in die Zwischenablage kopieren

   <

   6. script src

      =
   "http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"

   7. >

      script

      >

      
      

      Sie können unten JQuery verwenden.

      XML/HTML-Code

      1. Inhalt in die Zwischenablage kopieren

         1. <Skript>  

         2.     $(document).ready (function () {   

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

         4. var _this = $(this);            $('.select 

            >
         p').text(_this.attr(' data-value'));   

         5.             $(_this).addClass('selected').siblings().removeClass('selected'); >

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

         6.            cancelBubble(e);   

         7.         }) ;   

         8.   

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

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

                        cancelBubble(e);   

         12.         });   {   

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

         14.         })   

         15.  event.stopPropagation) {   

         16.             event.preventDefault();   

         17.             event.stopPropagation();   

         18.         } else {   

         19.             

             event.returnValue

              = 
         false
         20. ;   

         21.             event.cancelBubble();   

         22.         }   

         23.     }   

         Skript

         25. >

               

         26. 1、首先为 p 标签绑定 klicken Sie auf 事件，在触发的时候，为 wählen Sie 添加或移除 offene Klasse,也然后将其赋值给 p 标签，然后为选中的 li Sobald Sie die ausgewählte Klasse ausgewählt haben, klicken Sie auf 事件, 当我们点击网页中任何一处地方的时候，如果 ul是打开的, 就将其关闭, 不过这个时候由于所有元素都在 Dokument 内, 所以我们需要阻止事件冒泡,调用Die Funktion cancelBubble() wird gelöscht.

             Vorgang

         27. 好了,本文的内容到这就基本介绍了,希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流.

   Das obige ist der detaillierte Inhalt vonSo erzielen Sie mithilfe der CSS-Technologie coole Spezialeffekte in Dropdown-Boxen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!