【CSS】如何用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;
}

　　由于我们的爱心是由两个圆和一个正方形组成的，所以我们还需要再来一个圆形。

.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样式中的transform中的rotate属性了。

　　我们由于需要把三个div都旋转角度，所以我们把这三个div放在一个div里面。具体代码如下：

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

　　做到现在，我们的爱心就已经做出来咯。效果图如下：

　　全部代码如下（包含HTML代码和CSS代码）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <link href="css/square.css" rel="stylesheet" type="text/css">
 6         <title></title>
 7     </head>
 8     <body>
 9         <div class="main">
10             <div class="disc1"></div>
11             <div class="disc2"></div>
12             <div class="square"></div>
13         </div>
14     </body>
15 </html>

 1 *{
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 .main{
 6     transform: rotate(45deg);
 7     margin: 300px;
 8 }
 9 .disc1{
10     width: 100px;
11     height: 100px;
12     border:1px solid red;
13     background-color: red;
14     margin:300px 0px 0px 300px;
15     border-radius:100%;
16     float:left;
17 }
18 .disc2{
19     width: 100px;
20     height: 100px;
21     border:1px solid red;
22     background-color: red;
23     margin:250px 0px 0px 0px;
24     border-radius:100%;
25     float:left;
26     position: relative;
27     right: 50px;
28 }
29 .square{
30     width: 100px;
31     height: 100px;
32     border:1px solid red;
33     background-color: red;
34     margin: 300px 0px 0px 0px;
35     float: left;
36     position: relative;
37     right: 152px;
38 }

　　欢迎大家在评论区留言。

转载于:https://www.cnblogs.com/liu-en-ci/p/6721963.html

【CSS】如何用css做一个爱心相关推荐

用CSS伪类选择器做一个爱心
用CSS伪类选择器做一个爱心这里我们会用到 position:relative:相对定位 position:absolute;绝对定位 border-radius:圆角属性 transform:变换 ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
仟龙教您如何用html做一个酷炫掉渣的点名器
本文关键详细介绍了如何用html做一个酷炫掉渣的点名器,原文中根据示例编码详细介绍的十分详尽,对大伙儿的学习或是工作中具备一定的参照学习使用价值,必须的小伙伴们下边伴随着我来一起学习学习吧此点名器逐 ...
[css] 如何用css实现把“我不爱996”变成“699爱不我”？
[css] 如何用css实现把"我不爱996"变成"699爱不我"? unicode-bidi 属性与 direction 属性一起使用,来设置或返回文本是否被 ...
如何用Excel做一个战斗模拟器(一)升级经验表
如何用Excel做一个战斗模拟器(二)属性表如何用Excel做一个战斗模拟器(三)战斗过程模拟目录索引引言确定战斗公式与怪物强度确定人物升级经验确定人物升级时间确定升级所需经验引言作 ...
如何用Excel做一个战斗模拟器(三)战斗过程模拟
如何用Excel做一个战斗模拟器(一)升级经验表如何用Excel做一个战斗模拟器(二)属性表目录索引定义战斗子过程定位战斗双方基础属性利用基础属性与战斗公式进行计算战斗过程的运算与输出判 ...
android 画笔压痕效果,【自制样机教程】如何用Ps做一个压痕效果的Logo样机
原标题:[自制样机教程]如何用Ps做一个压痕效果的Logo样机上次教你们做的自制小糖袋的贴图样机不知道你们玩耍的咋样今天再给你们介绍一个logo的样机这次的教程主要用到了图层样式来看看怎么 ...
如何用Excel做一个战斗模拟器(四)装备的掉落与展示
如何用Excel做一个战斗模拟器(一)升级经验表如何用Excel做一个战斗模拟器(二)属性表如何用Excel做一个战斗模拟器(三)战斗过程模拟目录索引定义掉落表与装备表怪物本身掉落装备定义 ...
如何用Excel做一个战斗模拟器(二)属性表
如何用Excel做一个战斗模拟器(一)升级经验表如何用Excel做一个战斗模拟器(三)战斗过程模拟目录索引属性表属性表首先确定人物的生命.攻击.防御.暴击值与闪避值属性.用公式将其设定为与等 ...

【CSS】如何用css做一个爱心

摘要：HTML的标签都比较简单，入门非常的迅速，但是CSS是一个需要我们深度挖掘的东西，里面的很多样式属性掌握几个常用的便可以实现很好看的效果，下面我便教大家如何用CSS做一个爱心。

前期预备知识：

话不多说，先教大家怎么用css画一个圆形。

【CSS】如何用css做一个爱心相关推荐

最新文章

热门文章