メニューバー「三」が「×」に変形するCSS3遷移アニメーションの詳細解説-CSSチュートリアル-php.cn

メニューバー「三」が「×」に変形するCSS3遷移アニメーションの詳細解説

高洛峰

リリース： 2017-03-06 11:13:51

オリジナル

2695 人が閲覧しました

最近、あるページを真似したいと思ったのですが、その効果の 1 つが、3 つのメニューバーがサスペンション効果に変化する効果です

アイデア:

菜单栏 “三” 变形为“X”css3过渡动画详解 3 本の水平線の実現

: 従来は実現可能でしたマスターの Zhang Xinxu によれば、1 つのタグで 3 つの水平方向の効果を実現できます。一般的な原則は、1 つのラベルを使用して 3 つの効果を実現します。 -top、background、border-bottom はそれぞれ上部、中央、下部の水平線です。背景クリップ: コンテンツボックスを使用して切り取り、最後にパディングを使用して上下に引き伸ばして、3 本の水平線の視覚効果を実現します。

菜单栏 “三” 变形为“X”css3过渡动画详解

X 実装

: 変形された X には追加のラベルは必要ありません。独自の after before 疑似クラスの変換回転とオフセットの実装を使用します。角度を調整するには忍耐が必要です。

3 つの水平方向の効果を実現するためにパディングを使用することは、トリガーに対してあまり敏感ではないことに注意してください。アイコンラベルをラベルでラップし、ラッピングレイヤーで実行するのが最善です: ホバートリガー

以下は。コード

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <style type="text/css">
  .icon{
   width: 50px;
   height: 10px;
   padding: 10px 0;
   border-top: 10px solid #000;
   border-bottom: 10px solid #000;
   background: #000;
   background-clip: content-box;
  }
  .fa{   
   cursor: pointer;
   width: 50px;
   height: 50px;
   transition: .3s ease;
  }
  .fa:hover>.icon{
   border: 0;
   background: none;
  }
  .icon:before,.icon:after{
   position: absolute;
   content: "";
   width: 60px;
   height: 60px;
   transition: .3s ease;
   -webkit-transition: .3s ease;
   opacity: 0;
  }
  .icon:before{
   top: -5px;
   border-bottom: 10px solid #000;
  }
  .icon:after{
   top: 15px;
   border-top: 10px solid #000;
  }
  .fa:hover>.icon:before{
   opacity: 1;
   transform: rotate(135deg) translateX(5px) translateY(-25px);
   -webkit-transform: rotate(135deg) translateX(5px) translateY(-25px);
  }
  .fa:hover>.icon:after{
   opacity: 1;
   transform: rotate(-135deg) translateX(20px) translateY(39px);
   -webkit-transform: rotate(-135deg) translateX(20px) translateY(39px);
  }
 </style>
</head>
<body>
 <p class="fa">
  <p class="icon"></p>
 </p>
 <script type="text/javascript">
 </script>
</body>
</html>

ログイン後にコピー

メニューバーの「3」が「X」に変換される css3 遷移アニメーションの詳細な説明については、PHP 中国語 Web サイトに注目してください。