您的位置：首页 > 网站优化 > css  >  详解CSS如何画出一个爱心的案例

详解CSS如何画出一个爱心的案例

 更新时间：2017年1月22日 11:03  点击：1941
小编推荐的这篇文章介绍了css如何画出一个爱心的案例，附有简单易懂的实例代码，有需要的同学快看看吧

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

第一步：

先画一个正方形。如图：

 代码如下 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css画桃心</title>
    <style media="screen">
        .heart-body {
            width:500px;
            margin:100pxauto;
            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;
        }
[!--infotagslink--]

相关文章

  • Windows VPN服务器配置图文教程 超详细版

    VPN可以虚拟出一个专用网络，让远处的计算机和你相当于处在同一个局域网中，而中间的数据也可以实现加密传输，用处很大，特别是在一些大公司，分公司处在不同的区域。...2016-01-27

  • 解决执行maven命令时提示Process terminated的问题

    这篇文章主要介绍了解决执行maven命令时提示Process terminated的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25

  • PS滤镜里为什么没有素描？PS CS6素描滤镜在哪？

    我们在作图的时候需要用到“素描”滤镜，但是点开滤镜选项就是找不到。该怎么快速找到“素描”滤镜呢？请往下看。 1、点开滤镜选项时，发现没有素描这一项。2、别急，我...2017-01-22

  • php 中file_get_contents超时问题的解决方法

    file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢，导致php脚本超时了，但也有其它很多原因，下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25

  • Cloudflare国内自选IP节点整理收录

    一般来说为了达到隐藏自身 IP，我们都会选择一些 CDN 服务，目前用的最多的免费 CDN 是 Cloudflare。但是正常情况下 Cloudflare 是不能自己选择IP，有时候分配给我们的 IP 可能表现不佳，也只能将就着用。但是我们都希望可以用上 CF 比较快的 IP。那么自选IP，就显得很必要了。...2022-09-23

  • Mybatis Plus select 实现只查询部分字段

    这篇文章主要介绍了Mybatis Plus select 实现只查询部分字段的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-01

  • MySQL性能监控软件Nagios的安装及配置教程

    这篇文章主要介绍了MySQL性能监控软件Nagios的安装及配置教程,这里以CentOS操作系统为环境进行演示,需要的朋友可以参考下...2015-12-14

  • php file_get_contents 设置代理抓取页面示例

    file_get_contents函数在php中可以直接打开本地文件也可以直接抓取远程服务器文件，如果简单的采集我们可以使用file_get_contents直接来操作，如果有防采集我们可能需要...2016-11-25

  • 解决Mybatis 大数据量的批量insert问题

    这篇文章主要介绍了解决Mybatis 大数据量的批量insert问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-09

  • mybatis-plus 表名添加前缀的实现方法

    这篇文章主要介绍了mybatis-plus 表名添加前缀的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-08-26

  • iOS APP h5快捷程序 .mobileconfig的生成

    1.从APP Store 下载Apple Configurator 2从一个管理点管理所有iOS设备应用程序，文档和配置文件。想要确保您的所有家庭成员在其每台iOS设备上都有类似的应用和文档，管理日益增...2021-12-23

  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23

  • mybatis-plus 返回部分字段的解决方式

    这篇文章主要介绍了mybatis-plus 返回部分字段的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-02

  • 详解如何清理redis集群的所有数据

    这篇文章主要介绍了详解如何清理redis集群的所有数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-18

  • Redis连接池配置及初始化实现

    这篇文章主要介绍了Redis连接池配置及初始化实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-29

  • mybatis的Configuration详解

    这篇文章主要介绍了mybatis的Configuration详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-04

  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15

  • pandas pd.read_csv()函数中parse_dates()参数的用法说明

    这篇文章主要介绍了pandas pd.read_csv()函数中parse_dates()参数的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-05

  • php中去除文字内容中所有html代码

    PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02

  • C++中四种加密算法之AES源代码

    本篇文章主要介绍了C++中四种加密算法之AES源代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。...2020-04-25