CSSは赤いハートを描画します-CSSチュートリアル-php.cn

CSSは赤いハートを描画します

php中世界最好的语言

リリース： 2018-03-22 11:14:09

オリジナル

2472 人が閲覧しました

今回は赤いハートを描くためのCSSをお届けします。CSSで赤いハートを描くための注意点は何ですか?実際の事例を見てみましょう。

ステップ 1:

まず正方形を描きます。図に示すように:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css画桃心</title>
    <style media="screen">
        .heart-body {
            width: 500px;
            margin: 100px auto;
            position: relative;
        }
        .heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
        }
    </style>
</head>
<body>
    <p class="heart-body">
        <p class="heart-shape"></p>
    </p>
</body>
</html>

ログイン後にコピー

ステップ 2:

は before と :after の疑似要素を使用して、正方形の左側と上部に正方形を描画し、次に border-radius を使用します。 : 50%; 属性を変更し、図に示すように 2 つの円を取得します。

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            background-color: #ffc0cb;
        }
        .heart-shape:before {
            left: -45px;
        }
        .heart-shape:after {
            top: -45px;
        }

ログイン後にコピー

Use border-radius: 50%; ステップ 3:

クラス名は、heart-shape pです。図に示すように、transform:rotate(45deg); 属性を使用して、円の背景色を変更します。次に、Xiaoying が背景色を統一色に設定すると、次のように最終的な愛が生まれました。写真内:

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /**兼容苹果；谷歌，等一些浏览器认*/
            -moz-border-radius: 50%;
            /**兼容火狐浏览器*/
            -o-border-radius: 50%;
            /**兼容opera浏览器*/
            border-radius: 50%;
            background-color: #ffc0cb;
        }

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書: