摘要：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. UVALive 7045 Last Defence

    ProblemK. Last Defence Description Given two integersA and B. Sequence S is defined as follow: • S0 ...

  2. 通过JS将BSAE64生成图片并下载

    HTML:<div style="display:block;margin:0 auto;width:638px;height:795px;"><div id=& ...

  3. layer弹出层框架alert与msg详解

    ayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer ...

  4. Spring-boot 最小demo

    POM 文件,注意红色部分: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...

  5. 通讯录--(适配iOS7/8/9)

    导入库#import <AddressBook/AddressBook.h> #import <AddressBookUI/AddressBookUI.h> #pragma m ...

  6. Java集合ArrayList源码解读

    最近在回顾数据结构,想到JDK这样好的代码资源不利用有点可惜,这是第一篇,花了心思.篇幅有点长,希望想看的朋友认真看下去,提出宝贵的意见.  :) 内部原理 ArrayList 的3个字段 priva ...

  7. 最大化最小值　Aggressive cows

    Aggressive cows http://poj.org/problem?id=2456 N间小屋,M头牛,使得牛跟牛之间的距离最远,以防止牛打架. 2<=N<=100000 2< ...

  8. 修改Delphi 10.1.2 edit控件在android的复制、剪切和粘贴样式

    Delphi 10.1.2 edit控件在android默认的复制.剪切和粘贴样式太丑,经悟能-DelphiTeacher的提示,用最简单的代码修改后稍有改观. 默认的样式: 修改后的样式: 修改FM ...

  9. idea调试SpringMvc, 出现：”通配符的匹配很全面, 但无法找到元素 'mvc:annotation-driven' 的声明“错误的解决方法

    调试json格式输出,出现以下错误: HTTP Status 500 - Servlet.init() for servlet HelloDispatcher threw exception   ty ...

  10. 【树莓派】Linux应用相关：自动删除n天前日志

    linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...