簡単なチュートリアル
これは、垂直ページング ナビゲーション ボタン用の非常にクールなアニメーション効果のセットです。この特殊効果のセットには 18 の一般的な効果があり、スライド ショー、ページ切り替え、その他のコンテナ コンポーネント切り替えのためのページング ナビゲーション ボタンを作成するために使用できます。
使用方法
HTML 構造
以下は、この一連の垂直ページング ナビゲーション ボタン アニメーション効果の効果の 1 つを示す GIF 動的デモンストレーションです:
上記の垂直ページング ナビゲーション効果を生成する HTML 構造
<nav class="nav nav--timiro"> <button class="nav__item" aria-label="Item 1"></button> <button class="nav__item nav__item--current" aria-label="Item 2"></button> <button class="nav__item" aria-label="Item 3"></button> <button class="nav__item" aria-label="Item 4"></button> <button class="nav__item" aria-label="Item 5"></button> <button class="nav__item" aria-label="Item 6"></button> <button class="nav__item" aria-label="Item 7"></button> <button class="nav__item" aria-label="Item 8"></button> </nav>
CSS スタイル
.nav { position: relative; width: 8em; margin: 0 0 0 3em; } .nav__item { line-height: 1; position: relative; display: block; margin: 0; padding: 0; letter-spacing: 0; color: currentColor; border: 0; background: none; } .nav__item:focus { outline: none; }
次に、Wanwei zahi エフェクトの独自の CSS スタイルを設定します:
/*** Zahi ***/ .nav--zahi .nav__item { width: 2em; height: 2em; } .nav--zahi .nav__item::before, .nav--zahi .nav__item::after { content: ''; position: absolute; } .nav--zahi .nav__item:not(:last-child)::before { top: calc(2em - 9px); left: 5px; width: 2px; height: calc(2em - 12px); background: #98322a; } .nav--zahi .nav__item::after { top: 50%; left: 0; width: 12px; height: 12px; margin: -5px 0 0 0; border: 2px solid #98322a; border-radius: 50%; background: #f44336; -webkit-transition: -webkit-transform 0.3s, border-color 0.3s, border-width 0.3s, background 0.3s; transition: transform 0.3s, border-color 0.3s, border-width 0.3s, background 0.3s; } .nav--zahi .nav__item--current::after { border-width: 1px; border-color: #fff; -webkit-transform: scale3d(1.6,1.6,1); transform: scale3d(1.6,1.6,1); } .nav--zahi .nav__item:not(.nav__item--current):focus::after, .nav--zahi .nav__item:not(.nav__item--current):hover::after { border-color: #fff; background: #fff; } .nav--zahi .nav__item-title { font-family: 'Roboto Condensed', sans-serif; line-height: 1.5; display: block; position: relative; padding: 0 0 0 2.5em; white-space: nowrap; opacity: 0.3; color: #98322a; -webkit-transition: opacity 0.3s, color 0.3s; transition: opacity 0.3s, color 0.3s; } .nav--zahi .nav__item:not(.nav__item--current):focus .nav__item-title, .nav--zahi .nav__item:not(.nav__item--current):hover .nav__item-title { opacity: 0.5; } .nav--zahi .nav__item--current .nav__item-title { opacity: 1; color: #fff;
他のエフェクトの制作については、ダウンロード ファイルを参照してください。
上記は 18 個の垂直ページング ナビゲーション ボタンのアニメーション効果の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。