摘要：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;

}

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

.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 }

　　欢迎大家在评论区留言。

如何用css做一个爱心的更多相关文章

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

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

  2. 如何用css做一个细虚线边框表格

    <style type="text/css"> <!-- .dashed_tbl { border-top: 1px dashed #333333; border ...

  3. 如何用css实现一个三角形？

    昨天被人问到说如何用css实现一个三角形?em....  当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:

  4. 公司的一个面试题：如何用css让一个容器水平垂直居中？

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 简单说 用CSS做一个魔方旋转的效果

    说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...

  6. Micropython 如何用Turnipbit做一个自动浇水装置

    最近在研究Turnipbit这块板子,打算是连接一个摄像头模块,正在实验练习中,(祝自己早日弄好)上篇文章我们讲了用Turnipbit连接LCD5110显示英文词句,前几天给家里花浇水的时候发现花招了 ...

  7. 如何用C#做一个悬浮窗口程序

    用C#做一个像FlashGet的悬浮窗口,其实很简单,不像以前需要调用很多系统API.大致的步骤如下. 首先是主窗体部分,即要判断窗体的状态来决定是否显示悬浮窗口. 局部成员声明: private F ...

  8. CSS做一个Switch开关

    本文为博主原创,转载请注明出处. Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id ...

  9. 如何用css写一个带斜切角、有边框又有内外阴影的按钮呢？

    如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no ...

随机推荐

  1. 有关eclipse的内存溢出问题

    一:前言 最近在做的项目在启动tomcat时就报“内存溢出的错误”,其实也不是自己第一次遇到,但是每次都是在网上查询后敲进去,所以这次我觉得自己记载下来吧. 二:内容 我自己的配置大小,这里的配置位置 ...

  2. UVALIVE 3307 Adventurous Driving

    一开始重新建图搞的.然后参照了别人的博客.这个解法比较好 利用在SPFA维护入队次数.入队次数大于节点数目的位于负环. 那么负环中的点如何DFS到终点.(SPFA从起点开始如果能找到入队大于N那么一定 ...

  3. 安全测试===Mysql 注入技巧学习 MySQL注入技巧（1）

    默认存在的数据库: mysql 需要root权限读取 information_schema 在5以上的版本中存在 测试是否存在注入方法 假:表示查询是错误的 (MySQL 报错/返回页面与原来不同) ...

  4. 智联招聘的python岗位数据词云制作

    # 根据传入的背景图片路径和词频字典.字体文件,生成指定名称的词云图片 def generate_word_cloud(img_bg_path, top_words_with_freq, font_p ...

  5. 【 Linux 】lvs-dr模型实现HA，后端Nginx、PHP、MySQL分离 搭建wordpress站点

    要求:    1. wordpress程序通过nfs共享给各个realserver    2. 后端realserver中的nginx和php分离 网络结构图: 环境说明:    OS:centos6 ...

  6. java两种实现二分查找方式

    二分查找法适用于 升序排列的数组,如果你所要操作的数组不是升序排序的,那么请用排序算法,排序一下. 说明:使用二分查找法相比顺序查找  节约了时间的开销,但是增加了空间使用.因为需要动态记录 起始索引 ...

  7. hdu 1316(大整数)

    How Many Fibs? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  8. Java基础：GC机制

    上一节,简单的介绍了java当中的内存模型,那么经常和内存模型一起提到的JAVA垃圾回收机制当然也需要在这里一并的总结一下. 所谓是垃圾回收机制,用通俗的话来说,就是将那些没有被任何变量引用的实例对象 ...

  9. centos 命令行修改主机名

    # vi /etc/sysconfig/network # 把localhost.localdomain 修改为 localhost.com # 保存退出 # vi /etc/hosts # 把loc ...

  10. shell脚本学习(二)

    shell传递参数 shell脚本在执行是可以传递参数,脚本内获取参数的格式为:$n,n为一个数字,1为第一个参数,2为第二个参数,以此类推 其中,$0代表了要执行的文件名 实例: 代码如下: #!/ ...