CSS로 슬라이딩 도어 효과를 얻는 방법-CSS 튜토리얼-php.cn

CSS로 슬라이딩 도어 효과를 얻는 방법

清浅

풀어 주다： 2018-12-12 09:00:27

원래의

6244명이 탐색했습니다.

CSS는 주로 의사 요소의 스타일을 설정하여 슬라이딩 도어 효과를 구현합니다. 디스플레이를 설정하면 요소가 나타나도록 하고 마우스가 슬라이드 아웃되면 숨깁니다. 웹사이트의 디자인은 웹사이트에 매우 중요합니다. 일반 텍스트 탐색 모음은 이미지 탐색 모음보다 빠르게 로드되지만 그 스타일은 나중에 이미지 탐색 모음만큼 아름답지는 않습니다. 내비게이션 바가 나타납니다. 로딩 성능이 좋고 아름답습니다. 다음 기사에서는 슬라이딩 도어 효과를 얻는 방법을 자세히 소개하겠습니다

[추천 코스:

HTML 코스, CSS 코스]

미닫이문 효과의 특징 :

(1) 실용성 : 네비게이션 바 메뉴 텍스트의 길이에 따라 너비가 자동으로 조절 가능

(2) 단순성 : 사용할 수 있습니다. 멋진 네비게이션 바 효과를 만들기 위한 간단한 배경 이미지

( 3) 적용 가능성: 여러 레이어에 적용 가능

사례 공유

Jingdong 홈페이지 메뉴 네비게이션 바 슬라이딩 도어를 모방

가상 요소를 요소에 설정하여 슬라이딩 도어 효과 위로 올라갈 때 display:none을 사용하여 메뉴를 숨깁니다. 이때 마우스 오버 이벤트가 발생합니다. 블록은 메뉴를 표시합니다. 이런 식으로 CSS 코드를 사용하여 마우스가 슬라이드하기 전에

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>

     *{
     	padding: 0;
     	margin: 0;
     	list-style:none;
     	 text-decoration: none;
     }
     ul{
         padding:20px 0px;
         width: 200px;
         background:#fff;
         border: 1px solid #ccc;
         position: relative;
     }
     ul li{
         height: 40px;
         line-height: 40px;
         padding-left:10px;
     }
     ul li:hover{
         background: #ccc;
     }
     ul li a{
        color: #444; 
        font-size: 14px;
     }
     /*滑动门*/
     ul .div1,.div2,.div3{
         position: absolute;
         top:0;
         left:200px;
         display: none;
     }

     ul li:hover .div1{
         display: block;
         width:800px;
         opacity: 1;
     }
 </style>

</head>
<body>
 <div>
     <ul>
         <li>
             <a href="#">手机/运营商/数码</a>
             <div class="div1">
             </div>
         </li>
         <li>
             <a href="#">电脑/办公</a>
             <div class="div2"></div>
         </li>
         <li>
             <a href="#">家居/家具/家装</a>
             <div class="div3"></div>
         </li>
         <li>
             <a href="#">男装/女装/童装</a>
             <div class="div3"></div>
         </li>
     </ul>
 </div>
</body>
</html>

로그인 후 복사

마우스가 슬라이드하기 전에

CSS로 슬라이딩 도어 효과를 얻는 방법 마우스가 슬라이드할 때