CSS3 속성 전환을 기반으로 메뉴 탐색 효과 만들기-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3 속성 전환을 기반으로 메뉴 탐색 효과 만들기

不言

Jul 02, 2018 am 10:57 AM

css3 transition 항해 메뉴

이 글에서는 주로 CSS3 속성 전환을 기반으로 한 메뉴 탐색 효과 생성을 소개합니다. 이는 메뉴 항목 위로 마우스를 밀어 배경 슬라이더를 동적으로 변경하는 기능을 실현할 수 있습니다. CSS3 기반 속성 전환 구현은 매우 실용적입니다. 친구는

을 참조할 수 있습니다. 이 문서에서는 CSS3 속성 전환을 기반으로 메뉴 탐색 효과를 만드는 예를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다:

CSS3 탐색 메뉴, 모션 레이어가 디스플레이 레이어 아래에 있을 때 전환으로 인해 페이지가 깜박이게 됩니다. 이유는 Chrome에서 처음 렌더링할 때 생성된 버그입니다. CSS 애니메이션은 현재로서는 확인할 수 없지만 현재 알려진 해결 방법은 두 가지입니다.

-webkit-backface-visibility: Hidden(뒤쪽을 사용자를 향할 때 변환되는 요소의 면이 표시됩니다: 숨김)

-webkit-transform-style: Preserve-3d; (임베디드 요소가 3D 공간에서 렌더링되는 방식 설정: 3D 유지).

런닝 효과 스크린샷은 다음과 같습니다.

구체 코드는 다음과 같습니다

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<title>css3的属性transition制作菜单导航</title>
<style>
*{margin:0px;padding:0px;}
body{background:#45B5DA;margin:0px;padding:0px;}
.tips{width:370px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
#nav{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-185px;}
li{
  width:74px;height:40px;text-align:center;float:left;line-height:40px;color:#fff;text-decoration:none;list-style:none;cursor : pointer;
}
li#chage{
  width:70px;height:38px;display:block;position:absolute;left:0px;z-index:-1;border:2px solid #191919;
  border-radius:10px;
  background:-webkit-gradient(linear, 0 100%, 0 0, from(black), color-stop(0.5, black), color-stop(0.52,#313131), to(#6A6A6A));
  box-shadow:0px 2px 0px rgba(255, 255, 255, .3);
  -webkit-transform: translate(0px,0px);
  -webkit-transition:-webkit-transform .2s ease-out;
}
</style>
</head>
<body>
<section class="tips">
  当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条：
  -webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏）
  -webkit-transform-style: preserve-3d; （设置内嵌的元素在 3D 空间如何呈现：保留 3D ）
  qq群:197326136
</section>
<section id="nav">
  <li href="#" title＝"css3菜单,css3菜单导航">首页</li>
  <li href="#" class="nav_2" onmouseover = "zhj.slide(1);" onmouseout = "zhj.slide(0);">脚本</li>
  <li href="#" onmouseover = "zhj.slide(2);" onmouseout = "zhj.slide(0);">特效</li>
  <li href="#" onmouseover = "zhj.slide(3);" onmouseout = "zhj.slide(0);">源码</li>
  <li href="#" onmouseover = "zhj.slide(4);" onmouseout = "zhj.slide(0);">下载</li>
  <li href="javascript:void(0);" id="chage"></li>
</section>
</body>
<script type="text/javascript">
  function $(id){
    return typeof id === "string" ? document.getElementById(id) : id;
  }
  var zhj = {};
  zhj.slide = function(index){
    var transX = 74*index;
    $(&#39;chage&#39;).style[&#39;-webkit-transform&#39;] = &#39;translate(&#39;+transX+&#39;px,0px)&#39;;
  }
</script>
</html>

로그인 후 복사

이상은 이 글의 내용입니다. 모든 내용은, 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7510

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Windows 11: 시작 레이아웃을 가져오고 내보내는 쉬운 방법 Aug 22, 2023 am 10:13 AM

Windows 11에서는 시작 메뉴가 다시 디자인되었으며 시작 메뉴에 폴더, 앱 및 앱이 있었던 이전 버전과 달리 페이지 그리드에 배열된 단순화된 앱 세트를 제공합니다. 시작 메뉴 레이아웃을 사용자 정의하고 다른 Windows 장치로 가져오거나 내보내 원하는 대로 개인화할 수 있습니다. 이 가이드에서는 Windows 11에서 기본 레이아웃을 사용자 지정하기 위해 시작 레이아웃을 가져오는 단계별 지침을 설명합니다. Windows 11의 Import-StartLayout이란 무엇입니까? 시작 레이아웃 가져오기는 Windows 10 및 이전 버전에서 시작 메뉴에 대한 사용자 지정을 가져오기 위해 사용되는 cmdlet입니다.

순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예) Jun 28, 2022 pm 01:39 PM

순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.

CSS 팁: 전환을 사용하여 호버 상태 유지 Sep 27, 2022 pm 02:01 PM

호버 상태를 유지하는 방법은 무엇입니까? 다음 글에서는 JavaScript를 사용하지 않고 호버 상태를 유지하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

Windows 11의 마우스 오른쪽 버튼 클릭 메뉴에서 '추가 옵션 표시'를 기본값으로 설정하는 방법 Jul 10, 2023 pm 12:33 PM

사용자가 결코 원하지 않는 가장 성가신 변경 사항 중 하나는 마우스 오른쪽 버튼 클릭 상황에 맞는 메뉴에 "추가 옵션 표시"가 포함되는 것입니다. 그러나 이를 제거하고 Windows 11에서 클래식 컨텍스트 메뉴를 다시 가져올 수 있습니다. 더 이상 여러 번 클릭하거나 상황에 맞는 메뉴에서 이러한 ZIP 단축키를 찾을 필요가 없습니다. Windows 11에서 완전한 마우스 오른쪽 버튼 클릭 상황에 맞는 메뉴로 돌아가려면 이 가이드를 따르세요. 수정 1 - CLSID를 수동으로 조정하는 방법은 목록에 있는 유일한 수동 방법입니다. 이 문제를 해결하려면 레지스트리 편집기에서 특정 키나 값을 조정해야 합니다. 참고 – 이와 같은 레지스트리 편집은 매우 안전하며 문제 없이 작동합니다. 따라서 시스템에서 이 작업을 시도하기 전에 레지스트리 백업을 생성해야 합니다. 1단계 – 시도해 보세요

CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함) Jul 19, 2022 am 11:28 AM

이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.

내비게이션 지도의 가로 숫자 8은 무엇인가요? Jun 27, 2023 am 11:43 AM

내비게이션 지도의 가로 숫자 8은 안개를 의미하고, 보통은 노란색 8 경고 신호, 심각은 주황색 8 경고 신호를 의미합니다.

바이두 지도 앱 최신 버전 18.8.0 출시, 신호등 레이더 기능 최초 도입 및 실시간 주차 추천 기능 추가

Baidu Map App의 Android 및 iOS 버전 모두 최초로 신호등 레이더 기능을 도입한 버전 18.8.0을 출시하여 업계를 선도하고 있습니다. 공식 소개에 따르면 신호등 레이더를 켠 후 자동 감지를 지원합니다. Beidou High-Precision은 실시간으로 위치를 파악할 수 있으며, 전국 100만 개 이상의 신호등이 자동으로 녹색 물결 알림을 실행합니다. 또한 새로운 기능은 완전 무음 내비게이션을 제공하여 지도 영역을 더욱 간결하게 만들고 주요 정보를 한눈에 명확하게 하며 음성 방송을 제공하지 않아 운전자가 운전에 더 집중할 수 있도록 합니다. 2020년 10월 실시간 카운트다운 예측을 지원하는 내비게이션은 신호등 교차로에 접근할 때 남은 카운트다운 초를 자동으로 표시하여 사용자가 항상 전방의 도로 상황을 파악할 수 있도록 합니다. 2022년 12월 31일까지 신호등 카운트다운

Windows 11의 마우스 오른쪽 버튼 클릭 상황에 맞는 메뉴에서 'Windows 터미널에서 열기' 옵션을 제거하는 방법 Apr 13, 2023 pm 06:28 PM

기본적으로 Windows 11 마우스 오른쪽 버튼 클릭 상황에 맞는 메뉴에는 Windows 터미널에서 열기라는 옵션이 있습니다. 이는 사용자가 특정 위치에서 Windows 터미널을 열 수 있도록 하는 매우 유용한 기능입니다. 예를 들어, 폴더를 마우스 오른쪽 버튼으로 클릭하고 "Windows 터미널에서 열기" 옵션을 선택하면 Windows 터미널이 시작되고 해당 특정 위치를 현재 작업 디렉터리로 설정합니다. 이것은 훌륭한 기능이지만 모든 사람이 이 기능을 사용하는 것은 아닙니다. 일부 사용자는 마우스 오른쪽 버튼 클릭 상황에 맞는 메뉴에서 이 옵션을 원하지 않을 수 있으며 마우스 오른쪽 버튼 클릭 상황에 맞는 메뉴를 정리하기 위해 이 옵션을 제거하고 싶어할 수도 있습니다.

See all articles

CSS3 속성 전환을 기반으로 메뉴 탐색 효과 만들기

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제