今天小颖给大家分享一个用CSS画的爱心，底下有代码和制作过程，希望对大家有所帮助。

第一步：

先画一个正方形。如图：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css画桃心</title>

    <style media="screen">

        .heart-body {

            width: 500px;

            margin: 100px auto;

            position: relative;

        }

        .heart-shape {

            position: relative;

            width: 100px;

            height: 100px;

            background-color: #f70e0e;

        }

    </style>

</head>

<body>

    <div class="heart-body">

        <div class="heart-shape"></div>

    </div>

</body>

</html>

第二步：

将利用伪元素before和 :after，在正方形的左边和上边各画一个正方形，然后再利用border-radius: 50%;属性，修饰下这两个正方形，然后就得到了两个圆,如图所示：

      

        .heart-shape:before,

        .heart-shape:after {

            position: absolute;

            content: '';

            width: 100px;

            height: 100px;

            background-color: #ffc0cb;

        }

        .heart-shape:before {

            left: -45px;

        }

        .heart-shape:after {

            top: -45px;

        }

利用border-radius: 50%; 属性：

        .heart-shape:before,

        .heart-shape:after {

            position: absolute;

            content: '';

            width: 100px;

            height: 100px;

            -webkit-border-radius: 50%;

            /**兼容苹果；谷歌，等一些浏览器认*/

            -moz-border-radius: 50%;

            /**兼容火狐浏览器*/

            -o-border-radius: 50%;

            /**兼容opera浏览器*/

            border-radius: 50%;

            background-color: #ffc0cb;

        }

第三步：

类名为：heart-shape的div 利用transform: rotate(45deg); 属性将他们旋转45度，如图所示：

        .heart-shape {

            position: relative;

            width: 100px;

            height: 100px;

            background-color: #f70e0e;

            -webkit-transform: rotate(45deg);

            /* Safari 和 Chrome */

            -moz-transform: rotate(45deg);

            /* Firefox */

            -ms-transform: rotate(45deg);

            /* IE 9 */

            -o-transform: rotate(45deg);

            /* Opera */

            transform: rotate(45deg);

        }

小颖把圆的背景色和正方形的背景色没给统一的颜色，是为了大家更好的看到明显的效果图，接下来小颖将其背景色设置成统一的，最终的爱心就出来了，如图所示：

        .heart-shape:before,

        .heart-shape:after {

            position: absolute;

            content: '';

            width: 100px;

            height: 100px;

            -webkit-border-radius: 50%;

            /**兼容苹果；谷歌，等一些浏览器认*/

            -moz-border-radius: 50%;

            /**兼容火狐浏览器*/

            -o-border-radius: 50%;

            /**兼容opera浏览器*/

            border-radius: 50%;

            background-color: #f70e0e;

        }

一步一步教你用CSS画爱心的更多相关文章

  1. 情人节，教大家使用css画出一朵玫瑰花。

    情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...

  2. 一步一步教你如何在linux下配置apache+tomcat（转）

    一步一步教你如何在linux下配置apache+tomcat   一．安装前准备. 1．   所有组件都安装到/usr/local/e789目录下 2．   解压缩命令:tar —vxzf 文件名(. ...

  3. 一步一步教你将普通的wifi路由器变为智能广告路由器

    一步一步教你将普通的wifi路由器变为智能广告路由器 相信大家对WiFi智能广告路由器已经不再陌生了,现在很多公共WiFi上网,都需要登录并且验证,这也就是WiFi广告路由器的最重要的功能.大致就是下 ...

  4. 一步一步教你使用Git

    一步一步教你使用Git 互联网给我们带来方便的同时,也时常让我们感到困惑.随便搜搜就出一大堆结果,然而总是有大量的重复和错误.小妖发出的内容,都是自己实测过的,有问题请留言. 现在,你已经安装了Git ...

  5. 使用WPF教你一步一步实现连连看

    使用WPF教你一步一步实现连连看(一) 第一步: 问题,怎样动态的建立一个10*10的grid(布局) for (int i = 0; i < 10; i++){ RowDefinition r ...

  6. 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app

    一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...

  7. Ace教你一步一步做Android新闻客户端（一）

    复制粘贴了那么多博文很不好意思没点自己原创的也说不出去,现在写一篇一步一步教你做安卓新闻客户端,借此机会也是让自己把相关的技术再复习一遍,大神莫笑,专门做给新手看. 手里存了两篇,一个包括软件视图 和 ...

  8. 一步一步教你实现iOS音频频谱动画（二）

    如果你想先看看最终效果再决定看不看文章 -> bilibili 示例代码下载 第一篇:一步一步教你实现iOS音频频谱动画(一) 本文是系列文章中的第二篇,上篇讲述了音频播放和频谱数据计算,本篇讲 ...

  9. 一步一步教你实现iOS音频频谱动画（一）

    如果你想先看看最终效果再决定看不看文章 -> bilibili 示例代码下载 第二篇:一步一步教你实现iOS音频频谱动画(二) 基于篇幅考虑,本次教程分为两篇文章,本篇文章主要讲述音频播放和频谱 ...

随机推荐

  1. Mono为何能跨平台？聊聊CIL(MSIL)

    前言: 其实小匹夫在U3D的开发中一直对U3D的跨平台能力很好奇.到底是什么原理使得U3D可以跨平台呢?后来发现了Mono的作用,并进一步了解到了CIL的存在.所以,作为一个对Unity3D跨平台能力 ...

  2. ajax

    常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...

  3. 【翻译】MongoDB指南/CRUD操作（三）

    [原文地址]https://docs.mongodb.com/manual/ CRUD操作(三) 主要内容: 原子性和事务(Atomicity and Transactions),读隔离.一致性和新近 ...

  4. 【开源】.Net 分布式服务中心

    分布式服务中心 开源地址: http://git.oschina.net/chejiangyi/Dyd.BaseService.ServiceCenter 当垂直应用越来越多,应用之间交互不可避免,将 ...

  5. so 问题来了，你现在值多少钱？

    年底了一大帮人都写着年底总结,总结一年做过的事.错过的事和做错的事.增长了多少本事,找没找到女朋友……来年做好升职加薪,要么做跳槽的准备,程序猿又开始浮躁了……. so 问题来了,你现在值多少钱? 这 ...

  6. Spring获取ApplicationContext

    在Spring+Struts+Hibernate中,有时需要使用到Spring上下文.项目启动时,会自动根据applicationContext配置文件初始化上下文,可以使用ApplicationCo ...

  7. golang sync.WaitGroup bug

    注意,这个结构体,要是想在函数之间传来传去的话,必须要使用指针....... 这个结构体里没有 指针,这个类型可以说没有“引用特性”. 被坑了一晚上.特此记录.

  8. 页面布局class常见命名规范

    头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...

  9. ABAP单元测试最佳实践

    本文包含了我在开发项目中经历过的实用的ABAP单元测试指导方针.我把它们安排成为问答的风格,欢迎任何人添加更多的Q&A's,以完成这个列表. 在我的项目中,只使用传统的ABAP report. ...

  10. ILJMALL project过程中遇到Fragment嵌套问题:IllegalArgumentException: Binary XML file line #23: Duplicate id

    出现场景:当点击"分类"再返回"首页"时,发生error退出   BUG描述:Caused by: java.lang.IllegalArgumentExcep ...