CSS を使用してボタンのテキストのスライド効果を実現する方法

この記事では、ボタンのテキストスライドの特殊効果を実現するための CSS の使用方法を主に紹介します。必要な場合は、ソースコードのダウンロードを参照してください。ギットハブ。

https://github.com/comehop​​e/front-end-daily-challenges/tree/master/001-button-text-staggered-sliding-Effects

コード解釈

DOMを定義し、コンテナ内のボタンを定義するテキスト、各文字にはスパンがあり、各スパンにはデータテキスト属性があり、その値はスパン内の文字と同じです:

<p class="box">
    <span data-text="B">B</span>
    <span data-text="U">U</span>
    <span data-text="T">T</span>
    <span data-text="T">T</span>
    <span data-text="O">O</span>
    <span data-text="N">N</span>
</p>

ボタンの中央揃え:

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

ボタンのサイズとテキストスタイルを設定します:

.box {
    width: 200px;
    height: 60px;
    border: 2px solid black;
    text-align: center;
    font-size: 30px;
    line-height: 60px;
    font-family: sans-serif;
}

ボタンの各文字は、個別にアニメーション化できるようにインライン ブロック要素として設定されます:

.box span {
    display: inline-block;
    color: blue;
}

奇数番号の要素が上に、偶数番号の要素が下に配置されて、ボタン コンテナの外側に文字を千鳥状に表示します:

.box span:nth-child(odd) {
    transform: translateY(-100%);
}

.box span:nth-child(even) {
    transform: translateY(100%);
}

擬似を使用する 要素は各文字のコピーを追加します:

.box span::before {
    content: attr(data-text);
    position: absolute;
    color: red;
}

擬似要素の文字もずらして表示し、元の要素に対して相対的に配置します:

.box span:nth-child(odd)::before {
    transform: translateY(100%);
}

.box span:nth-child(even)::before {
    transform: translateY(-100%);
}

ボタンにマウスオーバー スタイルを追加し、イージング時間を設定しますを指定し、アニメーション化します:

.box:hover span {
    transform: translateY(0);
}

.box span {
    transition: 0.5s;
}

最後に、コンテナの外側のコンテンツを非表示にします:

.box {
    overflow: hidden;
}

これで完了です。

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

関連する推奨事項:

CSS3で縦書きのテキスト配置を実現

Webページの縞模様の背景スタイルを作成するCSS入門

以上がCSS を使用してボタンのテキストのスライド効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。