摘要：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代码）

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <link href="css/square.css" rel="stylesheet" type="text/css">

         <title></title>

     </head>

     <body>

         <div class="main">

             <div class="disc1"></div>

             <div class="disc2"></div>

             <div class="square"></div>

         </div>

     </body>

 </html>
 *{

     margin: 0px;

     padding: 0px;

 }

 .main{

     transform: rotate(45deg);

     margin: 300px;

 }

 .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】如何用css做一个爱心的更多相关文章

  1. 如何用css做一个爱心

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

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

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

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

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

  4. 如何用RadioButton做一个底部的切换栏

    上面的效果是用Radio进行制作的,一般我们做底部的切换栏的时候需要让按钮和文字都有一个选中的状态,然后根据点击不同的按钮触发不同的页面,这里的页面一般都是fragment做的.这里我们不讨论复杂的东 ...

  5. 如何用JavaScript做一个可拖动的div层

    可拖动的层在Web设计中用处很多,比如在某些需要自定义风格布局的应用中,控件就需要拖动操作,下面介绍一个,希望可以满足你的需求,顺便学习一下可拖动的层是如何实现的. 下面是效果演示: 这个DIV可以移 ...

  6. R数据分析：跟随top期刊手把手教你做一个临床预测模型

    临床预测模型也是大家比较感兴趣的,今天就带着大家看一篇临床预测模型的文章,并且用一个例子给大家过一遍做法. 这篇文章来自护理领域顶级期刊的文章,文章名在下面 Ballesta-Castillejos ...

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

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

  8. 如何用CSS和jQuery实现一个侧滑导航菜单

    为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...

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

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

随机推荐

  1. Laravel的console使用方法

    适用场景:分析数据(日志) php artisan make:console 你的命令类名 示例: php artisan make:console Check 在\app\Console\Comma ...

  2. 自定义分页Gridview中Excel导出

    先上图,如图所示导出所有查询出的数据 用的是AspNetPager分页控件,这个导出方法,不受分页和gridview列中数据的约束,可以导出您想导出的数据 首先前台页面代码,lblink即为导出exc ...

  3. 学习HTML5一周的收获1

    HTML5的基本结构 学习了title标签(显示网站名称),link标签(链接文件,可做网页美化) 快捷键:Ctrl+/ 注释 学习[meta标签] 1.charset属性:单独使用,设置文档字符集编 ...

  4. shell笔记整理1---vim编译器基础应用（参考鸟哥）

    1.linux中的配置文件都已是以ASCII的纯文本的形式存在 2.vim文本编译器. 一般模式:用vi打开的一个文件直接进入的就是一般模式,这个模式可以移动光标和删除字符,复制粘贴等,但是不能比那几 ...

  5. 使用D3 Geo模块画澳大利亚地图

    数据 数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.因此做数据可视化前需要想明白2件事: 你有什么数据? 你要传达什么信息? 本文中的示例中,将以不同的颜色显示澳大利亚不同地区的客户数 ...

  6. mongodb选型问题

    一.Mongodb的介绍 MongoDB 是一个跨平台的,面向文档的数据库,提供高性能,高可用性和可扩展性方便. MongoDB工作在收集和文件的概念. 数据库 数据库是一个物理容器集合.每个数据库都 ...

  7. Android使用Sugar ORM创建数据库报no such table:...的解决方法

    在学习使用Android开源框架Sugar ORM时,只是做了开始的创建数据库的操作就报出如下的异常信息 android.database.sqlite.SQLiteException: no suc ...

  8. [笔记]LR和SVM的相同和不同

    之前一篇博客中介绍了Logistics Regression的理论原理:http://www.cnblogs.com/bentuwuying/p/6616680.html. 在大大小小的面试过程中,经 ...

  9. iOS开发之UITabBarController

    1.概述 跟UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型例子就是QQ.微信等应用. 2.UITabB ...

  10. centos7 部署openstf

    1.安装nodejs,版本需大于6.9(写稿时使用的6.9,7.7.4版本会无法安装zmq): 2.安装android sdk(详细略,百度一大堆),注意必须将platform-tool配置到环境变量 ...