ホームページ > 記事 > ウェブフロントエンド > HTML5とCSS3でスマートアニメーションの切り替え効果を実現

HTML5とCSS3でスマートアニメーションの切り替え効果を実現

不言オリジナル: 2018-06-09 17:17:242016ブラウズ

この記事では、スマートなアニメーションのタブ切り替え効果を実現するための HTML5 + CSS3 ベースのデモを紹介します。これは非常に優れており、必要な友人は参考にしてください。

デザイナーがタブのレンダリングを提供しました。切り替え。小さな機能ではありますが、フロントエンドエンジニアが実装する際に注意すべき点はまだたくさんあります。参考までにデモを書きました。

最終的な効果は次のとおりです:

HTML5+CSS3 做一个灵动的动画 TAB 切换效果

GIFアニメーションで詳細を表示するために、アニメーション時間を3秒に延長しました

実装アイデア

垂直線は垂直ではないため、間隔をあけました, そのため枠線は使用できません。擬似要素を使ってみます。

縦棒は 3 本しかありませんが、li は 4 つあります。これは単純で、:not(:first-child) セレクターを使用して選択できます。

小さいものから大きいものへの効果を持たせたいので、背景色を直接使用してそれを実現することはできません。

疑似要素のサイズで制御すると計算が複雑になるのでbox-shadowを使って実現したいと思います。

それでは、大部分はこれで終わりです。次のようにコードを書き始めましょう。

  <p class="m">
    <ul class="tab">
      <li><a href="">导航1</a></li>
      <li><a href="">导航2</a></li>
      <li><a href="">导航3</a></li>
      <li><a href="">导航4</a></li>
    </ul>
  </p>

上記のコード構造は以前に書いたものなので、大丈夫だと思います。何も調整しません。面倒なコードはありません。

CSSコード

.m { margin: 100px; }
.tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 10px; overflow: hidden; }
.tab li { float: left; width: 100px; position: relative; overflow: hidden; }
.tab li:before, .tab li:after, .tab li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.tab li:before, .tab li:after { content: ""; display: block; }
.tab li:not(:first-child):after { background: #ddd; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }
.tab li a { display: block; position: relative; z-index: 2; color: #000; font-size: 14px; }
.tab li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }
.tab li:hover a { color: #fff; }
.tab li:hover:before { box-shadow: 0 0 0 100px #36bc99; }
.tab li:hover + li:after, .tab li:hover:after { height: 0; top: 20px; }

コード分析:

アニメーションの実装は非常に簡単で、transition属性を使用するだけです。

独自の擬似要素と次の兄弟要素の擬似要素を制御するには、+ セレクターを使用するだけです。

他のコードは比較的明確でシンプルなので、自分で分析できます。

この効果を達成するのは非常に簡単で、毎日の蓄積とさまざまなパラメータの柔軟な組み合わせに重点が置かれています。実装方法を考えて最終的にコードを書くまでがとても早いです。そしてそこには高度な知識はありません。

CSS が難しい理由は、CSS を知らないからではなく、CSS を一致させる方法を知らないからです。

実際には、まだデザイン効果の 99% しか復元していません。2 つの分割線のうち 1 つは背景の内側にあり、もう 1 つは背景の外側にあります。2 つの分割線を背景の内側に配置したい場合は、どうすればよいでしょうか。それ？考えてみてください。

アドバンテージSCSS。上記のCSSがコンパイルされました。実際、scss を使用して実装すると非常に便利で高速であり、コードも読みやすくなります。

デモは次のとおりです:

.m {
  margin: 100px;
}
.tab {
  width: 400px;margin: 0 auto;border: 1px solid $cdd;height: 40px;text-align: center;line-height: 40px;
  background: $cff;border-radius: 10px;overflow: hidden;
  li {
    float: left;width: 100px;position: relative;overflow: hidden;
    &:before,&:after,a {@include dz();}
    &:before,&:after {
      content: "";display: block;
    }
    &:not(:first-child) {
      &:after {
        background: $cdd;height: 20px;width: 1px;left: 0;top: 10px;position: absolute;
      }
    }
    a {
      display: block;position: relative;z-index: 2;color: $c00;font-size: 14px;
    }
    &:before {
      width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute;
    }
    &:hover {
      a {color: $cff;}
      &:before {
        box-shadow: 0 0 0 100px $cyan;
      }
      & + li:after,&:after {
        height: 0;top: 20px;
      }
    }
  }
}

もちろん、このコードではカラー変数とミックスインコードを使用しました。直接使用することはできません。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

HTML5とCSS3でスマートアニメーションの切り替え効果を実現

関連記事