ホームページ > 記事 > ウェブフロントエンド > 面白くて鮮やかな絵を通して、純粋な CSS を使用してハートを描く方法を学びましょう。 ！
面白くて鮮やかな絵を通して、純粋な CSS を使用してハートを描く方法を学びましょう。 ！
- 青灯夜游転載
- 2021-04-30 10:15:142105ブラウズ
この記事では、純粋な CSS を使用してハートを描画する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
要件/機能:
- CSS HTMl を使用して愛を描く方法。
分析:
- 正方形と 2 つの円を組み合わせるとハートを形成できます。 (学習ビデオ共有: css ビデオ チュートリアル )
1. まず正方形の円を描画し、次のように配置します:
2. 円を追加します。
<body>
<div id="heart"></div>
</body>#heart{
height: 300px;
width: 300px;
border: 2px solid black;
}2. 正方形の左側に円を追加します。ここの前に疑似クラスを使用します。実装 #heart{
height: 200px;
width: 200px;
border: 2px solid black;
position: relative;
}
#heart:before{
content: '';
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 50%; // 正方形加圆角变成圆
position: absolute;
left: -100px; // 向左位移正方形一半的长度
}この時点で、グラフィックは次のようになります:
#heart{
height: 200px;
width: 200px;
border: 2px solid black;
position: relative;
}
// 这里偷个懒.直接写一块了
#heart:before,#heart:after{
content: '';
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 50%;
position: absolute;
left: -100px;
}
// 第二个圆, 只需要向上位移正方形一半的高度
#heart:after{
left: 0;
top: -100px;
}
/*给heart进行旋转并加上颜色*/ transform: rotate(45deg); background-color: red;概要:
プログラミング関連の知識について詳しくは、
プログラミング ビデオをご覧ください。 ！
以上が面白くて鮮やかな絵を通して、純粋な CSS を使用してハートを描く方法を学びましょう。 ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。