ホームページ > 記事 > ウェブフロントエンド > CSSで赤いハートを作る方法
CSSで赤いハートを作る方法
- 藏色散人オリジナル
- 2021-02-28 15:17:062277ブラウズ
CSS で赤いハートを作成する方法: 最初に HTML サンプル ファイルを作成し、次に div を定義して CSS 属性で円を描き、次に正方形を作成し、最後に CSS 変換で回転属性を使用します。恋愛スタイル。
このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
css を好きになる
要約: HTML タグは比較的シンプルで、すぐに使い始めることができますが、CSS は掘り下げる必要があります。 , その中のスタイル属性の多くは、美しい効果を実現するために一般的に使用されるいくつかの属性をマスターすることで実現できます。次に、CSS を使用してハートを作成する方法を説明します。
予備知識:
- 正方形の描き方を理解します。
- 円の描き方を理解する。
- ポジショニングとは何かを理解します。
- 回転方法を知ってください。
さっそく、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 サイトの他の関連記事を参照してください。