摘要：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. Python小程序之用户登陆接口

    编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 程序逻辑图: 代码: #!/usr/bin/env python #_*_ coding:UTF-8 _*_ #__author_ ...

  2. HDU3746（KMP求循环节）

    Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  3. ZigBee MAC层(上)

    1. 介绍 ZigBee MAC层,即IEEE 802.15.4 MAC层,这里主要介绍了802.15.4-2003版本 MAC层处理所有对物理无线信道的访问控制,并负责下面的任务 - 为协调器生成网 ...

  4. python学习笔记 序列化

    在程序运行的过程中,所有的变量都是在内存中,比如,定义一个dict: d = dict(name='Bob', age=20, score=88) 可以随时修改变量,比如把name改成'Bill',但 ...

  5. python学习笔记 异步asyncio

    asyncio是Python 3.4版本引入的标准库,直接内置了对异步IO的支持. asyncio的编程模型就是一个消息循环.我们从asyncio模块中直接获取一个EventLoop的引用,然后把需要 ...

  6. scrapy模拟知乎登录(无验证码机制)

    ---恢复内容开始--- spiders 文件夹下新建zhihu.py文件(从dos窗口中进入虚拟环境,再进入工程目录之后输入命令 scrapy genspider zhihu www.zhihu.c ...

  7. [ Openstack ] OpenStack-Mitaka 高可用之 镜像服务(glance)

    目录 Openstack-Mitaka 高可用之 概述    Openstack-Mitaka 高可用之 环境初始化    Openstack-Mitaka 高可用之 Mariadb-Galera集群 ...

  8. Delphi - 字符串 详解

    来自:http://www.cnblogs.com/huangjacky/archive/2009/12/10/1620950.html ------------------------------- ...

  9. Selenium2+python自动化68-html报告乱码问题【转载】

    前言 python2用HTMLTestRunner生成测试报告时,有中文输出情况会出现乱码,这个主要是编码格式不统一,改下编码格式就行. 下载地址:http://tungwaiyip.info/sof ...

  10. [图解算法] 归并排序MergeSort——<递归与分治策略>

    #include"iostream.h" void Merge(int c[],int d[],int l,int m,int r){ ,k=l; while((i<=m)& ...