CSS を使用してログインボタンにクールな効果を実現する (コード例付き)-CSSチュートリアル-php.cn

CSS を使用してログインボタンにクールな効果を実現する (コード例付き)

藏色散人

リリース： 2023-04-05 16:16:38

転載

1916 人が閲覧しました

今日、インターネットでクールなログインボタンのエフェクトを見つけました。一見すると素晴らしいと感じましたが、少しずつ脇に置いてみると、それほど難しくないことがわかりました。すべてのコードを投稿します。 ; 何か間違っていることがあれば、教えてください。

分析

以前のことは脇に置いて、実際には、原理は背景のサイズと一致する位置によって色のグラデーション効果を実現することです。

text-transform: uppercase; 文字を大文字に変換することを指します
次に、背景と背景サイズを設定します
マウスが移動したときに変更します(ホバー)ボタンを配置するだけです

エフェクト 1:

CSS を使用してログインボタンにクールな効果を実現する (コード例付き)

このエフェクトは、それほどクールでも派手でもありません。エフェクトを使用する場合は、これがより適しているはずです。必要な色を一致させるだけです。

コードをプレビューにコピーします

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 230px;
            height: 90px;
            line-height: 90px;
            text-align: center;
            color: #fff;
            font-size: 25px;
            text-transform: uppercase; 
            cursor: pointer;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 60px;
        }

        .btn:hover {
            animation: animate 8s linear infinite;
        }

        @keyframes animate {
            0% {
                background-position: 0%;
            }

            100% {
                background-position: 400%;
            }
        }
    </style>
</head>

<body>
    <b href="#">register</b>
</body>

</html>

ログイン後にコピー

エフェクト 2:

CSS を使用してログインボタンにクールな効果を実現する (コード例付き)

##注: filter: Blur(20px ) はガウスぼかしを設定するには

コードをプレビューにコピーします

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 230px;
            height: 90px;
            line-height: 90px;
            text-align: center;
            color: #fff;
            font-size: 25px;
            text-transform: uppercase; 
            cursor: pointer;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 60px;
        }

        .btn:hover {
            animation: animate 8s linear infinite;
        }

        @keyframes animate {
            0% {
                background-position: 0%;
            }

            100% {
                background-position: 400%;
            }
        }

        .btn::before {
            content: &#39;&#39;;
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            z-index: -1;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 40px;
            opacity: 0;
            transition: 0.5s;
        }

        .btn:hover::before {
            filter: blur(20px);
            opacity: 1;
            animation: animate 8s linear infinite;
        }
    </style>
</head>

<body>
    <b href="#">register</b>
</body>

</html>

ログイン後にコピー

今日はここまでです。上記のコードをコピーして効果を確認できます。

インターネットであらゆる種類のクールなスタイルを調べた結果、私は本当に初心者であることがわかりました。今後はインターネット上に書かれたクールなスタイルをもっと読んでみたいと思っています。時間が来たら送りますので、ここに来て記録してください。将来もっともっと学んでくれることを願っています。

学習を促進する: 「

css ビデオチュートリアル」

以上がCSS を使用してログインボタンにクールな効果を実現する (コード例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。