드롭다운 상자에서 멋진 특수 효과를 얻기 위해 CSS 기술을 사용하는 방법

이 글에서는 CSS를 사용하여 구현한 멋진 드롭다운 상자를 소개합니다. 구현 후의 효과는 정말 좋습니다. 관심 있는 친구는 아래에서 살펴보세요. 봐.

먼저 달성할 렌더링을 살펴보겠습니다

그런 것을 만들어라. 효과는 여전히 번거롭지만, 코드는 이해하기 어렵지 않다.

먼저 HTML 코드를 살펴보겠습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. <p class="컨테이너">

2.  <p class="제목">

3.  <h2>사용자 정의 선택h2> ;

4.  p>

5. 
   

6.  <p class="선택">

7.  <p>선택하세요p>

8.  <

li

9. 데이터 값="HTML5">HTML5li >     <

li

10. 데이터 값="CSS3">CSS3li >

   
11. <

    li 데이터 값="JQuery">JQuery < /리>

      
12. 리 data -값="백본">백본li>
 
13. ul> ;/ p>

p> ;

이 효과를 시뮬레이션하기 위해 기본 선택 요소를 사용하지 않고 다른 요소를 사용하는 것을 볼 수 있습니다. li 요소에 대해 data-value를 지정했는데, 그 이유는 주로 JQuery를 사용하여 선택한 값을 가져와서 p 요소 아래에 배치하기 때문입니다.

CSS 코드를 단계별로 살펴보겠습니다.

CSS 코드클립보드에 콘텐츠 복사

1. * {

2. 여백: 0

3. 패딩: 0;

}
html {
7. 글꼴 - 가족

   : '터미널'

8. }

9. 본문 {
배경색
11. :

    #33CC66

12. } 0으로 설정합니다. 2. 웹페이지의 기본 글꼴을 터미널로 설정하고 글꼴 크기를 62.5%(10px)로 설정합니다.

    3. 배경색을 #33CC66으로 설정합니다.

XML/HTML 코드

클립보드에 콘텐츠 복사

<

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

rel
1. =

   '스타일시트' 유형='text/css'> 위에서는 터미널 글꼴을 사용했고 다음에도 Lobster 글꼴을 사용할 예정이므로 이 코드 줄을 사용하여 참조를 추가하세요. 1. 머리글을 지정하고 너비를 선택한 다음 가로 중심을 지정합니다. 2. 제목 너비를 주로 선택보다 넓게 만들고 더 아름답게 보이도록 수정합니다. 그런 다음 위쪽 및 아래쪽 여백을 지정합니다. 3. 제목 아래 h2 요소의 글꼴, 글꼴 크기, 색상을 설정합니다.

CSS 코드

클립보드에 콘텐츠 복사

.select > , .select ul {

배경색: #ffffff

🎜>글꼴 크기
2. : 2rem;

 
3. 테두리

   -반경: 5px ;

4.  여백-하단: 0 ;                                                   

5. 텍스트 정렬

   : 왼쪽;

6. 패딩

   : 1rem;

7. 위치

   :

   상대
;
 
9. 테두리-하단

   -

   오른쪽
10. 오른쪽

    -반경: 0; 🎜>

11.  

    커서: 포인터

    ;

12.         색상: rgba(102, 102, 102, .6);   

13.     }   

14. .select > p:after {   

15.         디스플레이: 차단;   

16.         너비: 10px;   

17.         높이: 10px;   

18.         콘텐츠: '';   

19.         위치: 절대;   

20.         상단: 1.4rem;   

21.         맞아맞아: 2rem;   

22.         테두리-하단: 1px 단색 #33CC66;   

23.         왼쪽 테두리: 1px 단색 #33CC66;   

24.         변환: 회전(-45deg);   

25.         전환: .3s ease-out, top .2s ease-out;   

26.     }  

1、设置 p 와 ul 元素的背景颜color和边框等设置。

2、为 p元素单独指定样式，并设置其 position 属性，主要是为了下面绘右侧的下拉按钮。

3、利用 :after 在p 元素的右方绘官下拉按钮，可以看流来，我们是利用左下边框然后旋转 -45 도 模拟的这个效果。值得注意的是，我们需要将其  디스플레이 设置为 block，并且设置宽高，否将看不到 这个效果。

CSS 코드复system内容到剪贴板

1. .select ul {   

2. 여백 상단: 0;   

3.     테두리 상단-왼쪽-반경: 0;   

4.     테두리 상단-오른쪽오른쪽-반경: 0;   

5.     목록 스타일 유형: 없음;   

6.     커서: 포인터;   

7.     overflow-y: auto;   

8.     최대 높이: 0;   

9.     전환: 최대 높이 .3s ease-out;   

10. }   

11.   

12. .select ul li {   

13.     왼쪽 패딩: 0.5rem;   

14.     디스플레이: 차단;   

15.     줄 높이: 3rem;   

16.     텍스트 정렬: 왼쪽;   

17. }  

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

2、지금 这里设置的时候我遇到了一个问题，就是 li 标签始终·不满 ul 的一行，那是因为其默认에는 여백과 패딩이 있고 所以에는 一이 있습니다.开始的时候就将网页中所有元素的외부边距와内边距设置成了 0。

CSS 코드클립보드에 콘텐츠 복사

1. .select.open ul { 

2.  최대 높이: 20rem; 

3. 변환 원본: 50% 0 🎜>

   -webkit- 애니메이션: 슬라이드 다운 0.5초 여유

4. }

6. .select .open > p:after {

8. top: 1.6rem; : 회전(-225deg);

   전환 : .3s이지인,
상단
9. .2s이지인
   }

10. 1.열림 최대 높이를 설정하고 애니메이션을 적용합니다.
11. 2. 드롭다운 버튼을 -225도 회전하고 애니메이션을 할당합니다.

    이 드롭다운 효과의 핵심이기도 한 ul 요소에 지정된 슬라이드다운 애니메이션 효과를 살펴보겠습니다.

12. CSS 코드

클립보드에 콘텐츠 복사

@-webkit- keyframes 슬라이드다운 {

0% {

변환: scale(1, 0);

1. }                                                                                                                         🎜>}

2. 50%{

3. 변환: 배율(1, 0.75) > } 

4. 75% {

5. 변환: scale(1, 1.1)

6. }

7. 100% {

8. 변환: scale(1, 1)

9. }

10. }

11. ul의 크기를 0.75~1.25 사이로 계속해서 변경하는 위의 코드를 보시면 이해가 되실 겁니다. 점프 효과가 있어요.
    아래에 간단한 CSS 코드가 있으니 더 이상 설명하지 않겠습니다.
13. CSS 코드
    클립보드에 콘텐츠 복사
.select ul li: hover {
16. 배경색

    : rgba(102, 153, 102, 0.4)

17. }

.select .selected {

배경색: rgba (102, 153, 102, 0.8);

1. }

2. CSS 이제 끝났으니 어떻게 해야 하는지 살펴보겠습니다. JQuery를 사용하여 이 효과를 제어하세요.

   제가 사용하는 BootCDN과 같은 CDN 서비스를 현재 많은 웹사이트에서 제공하고 있기 때문에 사용하기 위해 JQuery를 다운로드할 필요가 없습니다.

3. XML/HTML 코드
4. 클립보드에 콘텐츠 복사

5. <
6. 스크립트

   src=

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

script

>

아래 JQuery를 사용할 수 있습니다.

XML/HTML 코드

1. 클립보드에 콘텐츠 복사

   1. <스크립트>  

   2.     $(문서).ready (함수 () {   

   3.         $('.select ul li').on("클릭", 함수(e) {   

   4. var _this = $(this);   

   5.             $('.select >p').text(_this.attr(' 데이터-값'));   

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

   7. $ ( '. select'). ToggleClass ( 'Open'); ;   

   8.   

   9.         $('.select

      >
   p').on("클릭", 함수 ( e) {   
              $('.select').toggleClass('open');   

   11.             cancelBubble(e);   

   12.         });   

   13.   

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

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

   16.         })   

   17.     })   

   18.   

   19.     function cancelBubble(event) {   

   20.         if ( event.stopPropagation) {   

   21.             event.preventDefault();   

   22.             event.stopPropagation();   

   23.         } else {   

   24.             

       event.returnValue
    = 
   25. false

       ;   

   26.             event.cancelBubble();           }   

   27.     }   

   29. script
       >
     

   30. 1、首先为 p 标签绑定 click 事件，지금触发的时候，为 선택 添加或移除 오픈 클래스, 也就是将 ul 显示出来。2、为 li 绑定 click 事件，当选中了一个 li yuan素的时候，首先获取到 data-value，然后将其赋值给 p标签，然后为选中的 li添加 selected class,与此同时利用 siblings() 方法，让兄弟节点的 selected class 移除。3、为 document 设置click 当我们点击网页中任何一处地방법적인 방법, ul是打开的,就将其关闭,不过这个时候由于所有遠素tour는 document 内,所以我们需要阻止事件冒泡，调用自己写的 cancelBubble() 方法입니다.

   总结

   好了, 本文的内容到这就基本介绍了, 希望能对大家的school习或者工작품带来一定, 帮助有疑问大家可以留言交流。

위 내용은 드롭다운 상자에서 멋진 특수 효과를 얻기 위해 CSS 기술을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!