今回は、アニメーションによるTAB切り替えの実装方法と、アニメーションによるTAB切り替えを実装するための注意事項について説明します。実際のケースを見てみましょう。
デザイナーはタブ切り替えのレンダリングを提供しました。小さな機能ではありますが、フロントエンドエンジニアが実装する際に注意すべき点はまだたくさんあります。参考までにデモを書きました。 最終的な効果は次のとおりです:
実装アイデア
垂直線は垂直ではないため、間隔をあけました, そのため枠線は使用できません。擬似要素を使ってみます。 縦棒は 3 本しかありませんが、li は 4 つあります。これは単純で、:not(:first-child) セレクターを使用して選択できます。
小さいものから大きいものへの効果を持たせたいので、背景色を直接使用してそれを実現することはできません。 疑似要素のサイズで制御すると計算が複雑になるのでbox-shadowを使って実現したいと思います。 それでは、次のようにコードを書き始めましょう:HTML コード
<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 を一致させる方法を知らないからです。
.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 サイトの他の関連記事に注目してください。 推奨読書:
以上がアニメーションによるタブ切り替えの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
