CSS テクノロジーを使用してドロップダウン ボックスでクールな特殊効果を実現する方法

この記事では、CSS を使用して実装されたクールなドロップダウン ボックスを紹介します。詳細な実装プロセスとサンプル コードは、以下の記事に記載されています。

まず、実現するレンダリングを見てみましょう

このようなエフェクトを作成するのはかなり面倒ですが、コードを理解するのは難しくありません。

まず、HTML コードを見てみましょう。

XML/HTMLコードコンテンツをクリップボードにコピー

1. <p class="container">

2. < p クラス=「見出し」>

3. h2 > p

>

4. and＆gt;

p

5. ＆gt;
   

li

6. >値="CSS3">CSS3li>

7. リ> ;

8. <li data-value=

   "バックボーン"
9. >

   バックボーン リ >>

10. p

    > >

ネイティブの select 要素を使用せず、他の要素を使用してこの効果をシミュレートしていることがわかります。 li 要素に data-value を指定したのは、主に JQuery を使用して選択された値を取得し、それを p 要素の下に配置するためです。

CSS コードをステップごとに見てみましょう。

CSSコード内容をクリップボードにコピー

1. * {

2. margin: 0;

padding
3. : 0;
   }

5. html {
フォントファミリー
7. :

   'ターミナル': 62.5%;

8. ボディ{

9. 背景- color

   :
#33CC66
10. ;

11. }

12. 1. Web ページのすべての要素のマージンとパディングを 0 に設定します。

    2. Web ページのデフォルトのフォントをターミナルに設定し、フォント サイズを 62.5%、つまり 10 ピクセルに設定します。 3. 背景色を #33CC66 に設定します。

13. XML/HTML コード

コンテンツをクリップボードにコピー

<

link

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

=

'stylesheet'

1. type='text/css'>上記では Terminal フォントを使用しましたが、次は Lobster フォントも使用します。したがって、このコード行に参照を追加します。 1. 見出しの幅を指定し、水平方向の中央揃えを選択して指定します。 2. 見出しの幅を変更します。主に選択した幅よりも広くなり、より美しく見えます。次に、上下の余白を指定します。 3. 見出しの下の h2 要素のフォント、フォント サイズ、色を設定します。

CSSコード

コンテンツをクリップボードにコピーします

.select >, .select ul {

; フォントサイズ: 2レム;

1. 5px

   ;

2. margin-bottom: 0;

3. .select > {

4. パディング

   : 1rem;

5. 位置:

6. 左半径: 0;
   :
ポインタ
7. ;

8. color: rgba(102, 102, 102, .6);   

9. }

10. .選択> p:after {

11. display: block;   

12. 幅: 10px;   

13. 高さ: 10px;   

14. コンテンツ: '';   

15. 位置: 絶対;   

16. トップ: 1.4レム;   

17. 右右: 2レム;   

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

19. 左境界線: 1px solid #33CC66;   

20. 変換: 回転(-45度);   

21. トランジション: transform .3s ease-out、top .2s ease-out;   

22. }

1、pおよびul元素の背景色や边框等を配置します。

2、p元素個別に指定し、その位置属性を配置します。主に下面管理用です。下拉

3、p 元素の右方向にスクロールした後、左下のボタンを使用して -45 度回転させてこの効果を模倣したことがわかります。

CSSコード内容を剪定パネルに統合

.select ul {
2. マージントップ

   : 0;   

3. border-top

   -left-radius: 0;   

4. ボーダートップ

   -右右-半径: 0;   

5. リストスタイルタイプ

   : なし;   

6. カーソル

   : ポインター;   

7. オーバーフロー

   -y: auto;   

8. 最大高さ

   : 0;   

トランジション:
9. 最大高さ

   .3秒 イーズアウト;   

}
.select ul li {
13. padding-left

    : 0.5rem;   

14. 表示

    : ブロック;   

15. line-height

    : 3レム;   

16. text-align

    : left;   

    }

17. 1、 ul のいくつかの承認プロパティを設定し、最大値を 0 に設定し、overflow-y を auto に指定します。この時点で会議が実行されます。の時我遇到了一问题，就是li 标签開始终占不满 ul 的一行，那是因軘认有マージンとパディング，故に最初の時点でネット页中の全要素の外边ピッチと内边ピッチ設定が0に達する。




CSSコードコンテンツをクリップボードにコピー

1. .select.open ul {

2. max-height: 20rem;ジン: 50% 0;

-webkit-animation: スライドダウン .5 ​​秒イーズイン
.select.open > p:after {
6. position

   :

   絶対
;
: 1.6rem;

8. 変換: .3sease-in、top .2s

9. }

1. 開く最大の高さを設定し、アニメーション効果を割り当てます。

10. 2. ドロップダウン ボタンを -225 度回転し、アニメーションを割り当てます。

このドロップダウン効果の鍵でもある、ul 要素に指定されたスライドダウン アニメーション効果を見てみましょう。
CSSコード

12. コンテンツをクリップボードにコピー

@-webkit-keyframes slide-down {
0% {




変換: (1、 0); }

1. 25% {

2. 変換: スケール(1, 1.25) }
   50% {

3. 変換: スケール( 1, 0.75);

4. }

5. 75% {

6. 変換:

7. }
8. 100% {

9. 変換:scale(1, 1);

10. }

11. }

12. 上記のコードを見ると理解できると思いますが、ul のサイズを 0.75 ～ 1.25 の間でスケールさせることです。ジャンプ効果。
    以下にいくつかの簡単な CSS コードがありますが、これ以上は説明しません。
14. CSSコード
    コンテンツをクリップボードにコピー
.select ul li:hover {
17. background-color

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

    }


.select .selected {

背景色: rgba(102, 153, 102, 0.8);

1. CSSが完成したので、やってみましょうJQuery を使用してこの効果を制御する方法を見てください。

現在、私が使用している BootCDN など、多くの Web サイトが CDN サービスを提供しているため、JQuery をダウンロードする必要はありません。
XML/HTMLコード

3. コンテンツをクリップボードにコピー

<

5. script

src
6. =

   "http://cdn.bootcss.com/jquery/3.1 / jquery.min.js">

   script

>
以下のJQueryを使用できます。




XML/HTML コードコンテンツをクリップボードにコピーします

1. <script>

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

3. $('.select ul li')。 on("クリック", 関数(e) {

4. var _this = $(this);

5. $('.select

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

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

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

7. キャンセルバブル(e);

8. });

10. $('.select

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

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

12. cancelBubble(e);

$(document).on('click', function () {
$('.select').removeClass('open');

16. })

17. })

19. 関数 cancelBubble(event) {

20. if (event.stopPropagation) {

21. event.preventDefault();   

22. event.stopPropagation();   

23. } else {
event.returnValue
25. =

    false

    ;   

26. event.cancelBubble();   

    }

27. }

script

>

29. 1、首先はイベントをクリックして決定し、触発された時点で、追加またはを選択します 2、li のクリック イベントの場合、li の要素が 1 つある時点で、最初にデータ値が取得され、次にその値が p に格納され、その後選択されます。

    3、ドキュメント設定用のクリックイベント、私たちのポイントネットワークのいずれかの場所で、ulがオンになっている場合は、選択したクラスを追加します。この場合は、すべての要素がドキュメント内にあるため、イベントを回避する必要があり、自分で書き込んだ cancelBubble() メソッドを使用します。これは基本的には解決策であり、大家が意見を交換できるかどうか疑問がある場合に、大家の学業や仕事に一定の助けとなることが望ましい。

以上がCSS テクノロジーを使用してドロップダウン ボックスでクールな特殊効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。