摘要：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. 一维和二维ST模板

    void init(){ ; i < n; i++) st[i][] = a[i]; ; ( << j) <= n; j++){ ; i + ( << j) - & ...

  2. 【LuoguP1273有线电视网】树形依赖背包

    参考论文http://wenku.baidu.com/view/8ab3daef5ef7ba0d4a733b25.html 参考一篇写的很好的博文http://www.cnblogs.com/GXZC ...

  3. bzoj2683/4066 简单题

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2683 http://www.lydsy.com/JudgeOnline/problem.ph ...

  4. Ubuntu 下nginx 的卸载 与重新装

    由于本人把自己服务器的nginx 给玩坏了,不得已选择卸载重新安装,(先让我哭一会) 然后我把/usr/sbin/nginx  和/etc/nginx 和/usr/share/nginx 和 /usr ...

  5. MYSQL学习心得 优化

    这一篇主要介绍MYSQL的优化,优化MYSQL数据库是DBA和开发人员的必备技能 MYSQL优化一方面是找出系统瓶颈,提高MYSQL数据库整体性能:另一方面需要合理的结构设计和参数调整,以提高 用户操 ...

  6. kthread_create与kernel_thread的区别【栈】

    转自:http://blog.chinaunix.net/uid-25513153-id-2888903.html kthread_create与kernel_thread的区别 kernel thr ...

  7. easyUi根据一个日期给另一日期自动赋值的js

    $('#loanbegindate').datebox({ onSelect:function(date){ changeDate(); } }); $('#loanterm,#loantermtyp ...

  8. Selenium2+python自动化72-logging日志使用【转载】

    前言 脚本运行的时候,有时候不知道用例的执行情况,这时候可以加入日志,这样出现问题后方便查阅,也容易排查哪些用例执行了,哪些没有执行. 一.封装logging模块 1.关于logging日志的介绍,我 ...

  9. Selenium2+python自动化49-判断文本（text_to_be_present_in_element）【转载】

    前言 在做结果判断的时候,经常想判断某个元素中是否存在指定的文本,如登录后判断页面中是账号是否是该用户的用户名. 在前面的登录案例中,写了一个简单的方法,但不是公用的,在EC模块有个方法是可以专门用来 ...

  10. LNMP的基本配置

    LNMP的基本配置cd /usr/local/nginx_php/etc/ > php-fpm.conf                      //清空php-fpm.conf vim ph ...