CSSで赤いハートを作る方法

藏色散人
藏色散人オリジナル
2021-02-28 15:17:062318ブラウズ

CSS で赤いハートを作成する方法: 最初に HTML サンプル ファイルを作成し、次に div を定義して CSS 属性で円を描き、次に正方形を作成し、最後に CSS 変換で回転属性を使用します。恋愛スタイル。

CSSで赤いハートを作る方法

このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

css を好きになる

要約: HTML タグは比較的シンプルで、すぐに使い始めることができますが、CSS は掘り下げる必要があります。 , その中のスタイル属性の多くは、美しい効果を実現するために一般的に使用されるいくつかの属性をマスターすることで実現できます。次に、CSS を使用してハートを作成する方法を説明します。

予備知識:

  1. 正方形の描き方を理解します。
  2. 円の描き方を理解する。
  3. ポジショニングとは何かを理解します。
  4. 回転方法を知ってください。

さっそく、CSS を使用して円を描く方法を説明しましょう。

.disc1{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:300px 0px 0px 300px;
    border-radius:100%;
    float:left;
}

私たちの愛は 2 つの円と 1 つの四角形で構成されているため、もう 1 つの円が必要です。

.disc2{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:250px 0px 0px 0px;
    border-radius:100%;
    float:left;
    position: relative;
    right: 50px;
}

[推奨: 「css ビデオ チュートリアル 」]

3 番目のステップでは、正方形を作成する必要があります。

.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

これで大体の効果は出てきましたが、愛の角度を調整する必要があり、このときCSSスタイルの変形でrotate属性を使用する必要があります。

3 つの p をすべて角度ごとに回転する必要があるため、これら 3 つの p を 1 つの p の中に入れます。具体的なコードは次のとおりです。

.main{
    transform: rotate(45deg);
    margin: 300px;
}

これまでに、私たちの愛は結ばれました。レンダリングは次のとおりです。

すべてのコードは次のとおりです (HTML コードと CSS コードを含む)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link href="css/square.css" rel="stylesheet" type="text/css">
        <title></title>
    </head>
    <body>
        <div class="main">
            <div class="disc1"></div>
            <div class="disc2"></div>
            <div class="square"></div>
        </div>
    </body>
</html>
*{
    margin: 0px;
    padding: 0px;
}
.main{
    transform: rotate(45deg);
    margin: 300px;
}
.disc1{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:300px 0px 0px 300px;
    border-radius:100%;
    float:left;
}
.disc2{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:250px 0px 0px 0px;
    border-radius:100%;
    float:left;
    position: relative;
    right: 50px;
}
.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

以上がCSSで赤いハートを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。