摘要：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. 【数据结构】bzoj3747Kinoman

    Description 共有m部电影,编号为1~m,第i部电影的好看值为w[i]. 在n天之中(从1~n编号)每天会放映一部电影,第i天放映的是第f[i]部. 你可以选择l,r(1<=l< ...

  2. hive向表格中插入数据并分析语句

    1,---导入mds_imei_month_info ; //最大的动态分区表 set hive.support.concurrency=false; //是否支持并发 ; //each mapper ...

  3. 【poj3415-Common Substrings】sam子串计数

    题意:  给出两个串,问这两个串的所有的子串中(重复出现的,只要是位置不同就算两个子串),长度大于等于k的公共子串有多少个. 题解: 这题好像大神们都用后缀数组做..然而我在sam的题表上看到这题,做 ...

  4. ie8以上及非ie8情况下的写法

    <!-- [if gt ie 8]> <!--> <script src="no-ie8.js"></script>  <!- ...

  5. MySQL-based databases CVE-2016-6664 本地提权

    @date: 2016/11/10 @author: dlive 0x00 前言 这个漏洞可以结合CVE-2016-6663使用提升权限到root 0x01 漏洞原文 # http://legalha ...

  6. elastaticsearch

    # https://elasticsearch-dsl.readthedocs.io/en/latest/ # 文档:https://es.xiaoleilu.com/054_Query_DSL/70 ...

  7. 转：布局【ViewGroup】

    转: http://www.cnblogs.com/leehyuan/p/3389527.html 像素单位的变化:是用dip,而不是px,主要用于宽高的设置 在Android中支持的描述大小区域的类 ...

  8. ZigBee PHY层

    1. 介绍 ZigBee PHY层,即IEEE 802.15.4 PHY层,这里主要介绍了802.15.4-2003版本 PHY主要实现了如下功能 - 启动和关闭RF收发器 - 信道能量检测(Chan ...

  9. python实战===一行代码就能搞定的事情！

    打印9*9乘法表: >>> print( '\n'.join([' '.join(['%s*%s=%-2s' % (y,x,x*y) for y in range(1,x+1)]) ...

  10. IC卡文件系统的逻辑结构【转】

    转自:http://bbs.ednchina.com/BLOG_ARTICLE_172028.HTM 文件系统是COS的重要模块之一,它负责组织.管理.维护IC卡内存储的所有数据.文件系统的设计和实现 ...