css3属性遷移に基づいてメニューナビゲーション効果を作成する-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

css3属性遷移に基づいてメニューナビゲーション効果を作成する

不言

Jul 02, 2018 am 10:57 AM

css3 transition ナビゲーションメニュー

この記事では主に、CSS3 属性遷移に基づくメニューナビゲーションエフェクトの作成について紹介します。CSS3 ベースの属性遷移の実装は、非常に実用的です。必要な方は参考にしてください

この記事では、CSS3 属性遷移に基づいたメニューナビゲーション効果の作成例について説明します。皆さんの参考に共有してください。詳細は次のとおりです。

CSS3 ナビゲーションメニューでは、モーションレイヤーが表示レイヤーの下にある場合、遷移によってページがちらつきます。これは、Chrome が最初に CSS アニメーションをレンダリングするときに発生するバグです。この問題の原因は今のところ検証できませんが、現在知られている解決策は 2 つあります:

-webkit-backface-visibility: hidden; (変換される要素の裏側がユーザーに向かって見えるかどうかを設定します: 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 中国語 Web サイトにご注意ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7510

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Windows 11: スタートレイアウトをインポートおよびエクスポートする簡単な方法 Aug 22, 2023 am 10:13 AM

Windows 11 では、スタートメニューが再設計され、スタートメニューにフォルダー、アプリ、アプリがあった以前のバージョンとは異なり、ページのグリッドに配置された簡略化されたアプリのセットが特徴です。 [スタート] メニューのレイアウトをカスタマイズし、他の Windows デバイスにインポートおよびエクスポートして、好みに合わせてカスタマイズできます。このガイドでは、スタートレイアウトをインポートして Windows 11 のデフォルトレイアウトをカスタマイズする手順について説明します。 Windows 11 の Import-StartLayout とは何ですか? Import Start Layout は、Windows 10 以前のバージョンでスタートメニューのカスタマイズをインポートするために使用されるコマンドレットです。

純粋な 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

私たちユーザーが決して望んでいない最も迷惑な変更の 1 つは、右クリックのコンテキストメニューに [その他のオプションを表示] が含まれていることです。ただし、これを削除して、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リリース、信号機レーダー機能を初導入、リアルタイム駐車推奨機能を追加

Android 版と iOS 版の百度地図アプリは、業界に先駆けて信号機レーダー機能を初めて導入したバージョン 18.8.0 をリリースしました。公式の紹介によると、信号機レーダーをオンにした後、自動検出をサポートします目的地を入力することなく、運転中に信号機の位置を確認できます。北斗高精度はリアルタイムで位置を測ることができます。全国の 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版

ホットトピック