ウェブページの右下隅に「いいね！」カード効果を実現するための CSS (サンプルコード)

効果

HTML を実装するには、まずクリーンな HTML ページを準備し、ノードを記述します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <link rel="スタイルシート" type="text/css" href="./style.css" />
</head>
<本文>
    
    <div>
        <セクションクラス="カード">
            <div class="カードトップ">
                このページは役に立ちましたか?
            </div>
            <div class="カードボトム">
                <div タイトル="👍">
                    はい
                </div>
                <div タイトル="👎">
                    いいえ
                </div>
            </div>
        </セクション>
    </div>
</本文>
</html>

スタイルを記述するために、同じディレクトリにstyle.cssを作成します。

体 {
    マージン: 0;
    パディング: 0;
    /* モバイルで横画面と縦画面を切り替える*/
    -ms-テキストサイズ調整: 100%;
    -webkit-テキストサイズ調整: 100%;
    /* レンダリングの最適化 */
    -moz-osx-font-smoothing: グレースケール;
    -webkit-font-smoothing: アンチエイリアス;
    フォントサイズ: 15px;
}

* {
    ボックスのサイズ: 境界線ボックス;
    フォント ファミリ: "Fira Code"、Hack、Consolas;
}

：根 {
    --色: #ff4081
}

セクション {
    マージン: 0;
    パディング: 0;
}

.カード{
    フォントサイズ: 継承;
    位置: 固定;
    右: 0;
    下部: 0;
    背景色: var(--color);
    境界線の半径: 4px 4px 0 0;
    ボックスシャドウ: 0 16px 60px 0 rgba(86, 91, 115, 0.2);
    不透明度: 0.5;
    変換: translateX(-20px) translate(103px, 27px) rotate(35deg);
    遷移: すべて 400ms cubic-bezier(0.26, 0.6, 0.4, 1.54);
}

.card:hover {
    不透明度: 1;
    変換: translate(0, 0) rotate(0deg) translateX(-20px);
}

.カードトップ{
    高さ: 50px;
    行の高さ: 50px;
    パディング: 0 1rem;
    テキスト配置: 中央;
    ユーザー選択: なし;
    色: #fff;
}

.カード下部{
    ディスプレイ: フレックス;
    背景色: #fff;
    コンテンツの均等配置: スペースを均等に;
}

.card-bottom div {
    パディング: 1rem;
    カーソル: ポインタ;
    フォントの太さ: 700;
    テキスト変換:大文字;
    テキスト装飾: なし;
    色: var(--color);
    遷移: すべて .2 秒線形。
}

.card-bottom div:hover {
    テキストシャドウ: 0 1px 1px var(--color);
    文字間隔: 1px;
}

2 つのアニメーション:

rotate(0deg) -> rotate(35deg)
translate(0px, 0px) -> translate(103px, 27px)

アニメーションプロセス: transform: translateX(-20px) translate(103px, 27px) rotate(35deg);

translateX(-20px)アニメーションの前後で一貫しており、変更されるプロパティは 2 つだけであることに注意してください。

要約する

これで、CSS を使用して Web ページの右下隅に小さな「いいね！」カード効果を作成する方法についての記事は終了です (サンプルコード)。Web ページの右下隅に小さな「いいね！」カード効果を作成するための CSS コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: DockerにRocketMQをインストールするための実装手順

>>: Flash が HTML div 要素を覆わないようにする方法