摘要：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. Bootstrap 栅格系统 理解与总结

    Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...

  2. Eclipse工具栏太多，自定义工具栏，去掉调试

    Window --> Customize Perspective... --> Tool Bar Visibility 去掉勾选debug  Tip:最新版本Customize Persp ...

  3. cmd常用命令行

    新建文件夹或文件 打开磁盘     F: 退出cmd     exit 返回上一级     cd.. 创建文件夹     md 文件夹名 在d盘创建文件夹     md d:\文件夹名 在当前目录打开 ...

  4. 【poj3260-最少找零】多重背包+完全背包

    多重背包+完全背包. 买家:多重背包:售货员:完全背包: 开两个数组,分别计算出买家,售货员每个面额的最少张数. 最重要的是上界的处理:上界为maxw*maxw+m(maxw最大面额的纸币). (网上 ...

  5. 通过jQuery实现轮播效果

    HTML <div class="wrap"> <div id="slide"> <ul class="list&quo ...

  6. UVA 10183 How Many Fibs?

    高精度推出大概600项fabi数,就包含了题目的数据范围,对于每组a,b,从1到600枚举res[i]即可 可以直接JAVA大数.我自己时套了C++高精度的版 JAVA 复制别人的 import ja ...

  7. 远程编写+调试服务器上的Python程序

    原帖参见(需自备梯子):https://webcache.googleusercontent.com/search?q=cache:1htdR2EXj5wJ:https://www.digitaloc ...

  8. 表单文件上传，ajax文件上传

    原创链接:http://www.cnblogs.com/yanqin/p/5345562.html html代码  index.jsp(表单文件上传) <form action="sh ...

  9. Android之Activity

    Activity总结: Activity的顶层View是DecorView,而我们在onCreate函数中通过setContentView设置的View只不过是这个DecorView的一部分罢了.De ...

  10. Newtonsoft.Json 序列化和反序列化 以及时间格式 2 高级使用

    手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...