摘要：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. iOS视频编辑SDK

    IOS视频编辑SDK接入说明 一.名词解释 分辨率:用于计算机视频处理的图像,以水平和垂直方向上所能显示的像素数来表示分辨率.常见视频分辨率的有1080P即1920x1080,720P即1080x72 ...

  2. Asp.Net MVC 之 Autofac 初步使用3 集成web api

    今天我们试着在WebApi2实现autofac的注入,关于这方面也是看了几位园友的分享省了不少时间,所以结合着前篇的demo再新建webapi进行... 一样开篇还是发下大概demo结构: 还是nug ...

  3. [PKU2389]Bull Math (大数运算)

    Description Bulls are so much better at math than the cows. They can multiply huge integers together ...

  4. 3410: [Usaco2009 Dec]Selfish Grazing 自私的食草者

    3410: [Usaco2009 Dec]Selfish Grazing 自私的食草者 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 71  Solve ...

  5. Jmeter正则提取list中相同key的value和出现的次数

    list中如何计算某个key出现的次数以及通过正则关联参数化呢? 首先要通过正则提取出现key的value 举例:

  6. CCF 201609-4 交通规划

    问题描述 试题编号: 201609-4 试题名称: 交通规划 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 G国国王来中国参观后,被中国的高速铁路深深的震撼,决定为自己的国家 ...

  7. 一切app源于生活 用于生活 一个利于生活的app——利生活

    现在的app软件可以说 各行各业都基本达到饱和阶段 因为智能手机时代让我们的世界缩小了十倍百倍甚至千倍,我们可以足不出户知天下可以足不出户的去购物. 既然app利于生活 那么今天我所要开发的一个app ...

  8. MyEclipse10的正确破解方法

    无法转载,故给出原文链接,以供需要者. MyEclipse10的正确破解方法

  9. IT生涯, 我的常用软件清单

    IT生涯, 我的常用软件清单 SkySeraph Jan. 26th 2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.skysera ...

  10. 在ExpressJS中设置二级域名跨域共享Cookie

    问题:我使用expressjs和mongostore来管理session.下面是expressjs中的设置. app.configure(function(){ app.use(express.ses ...