纯CSS实现爱心图形

在网页用我们经常需要用到爱心❤，比如说给文章点赞，或者给你喜欢的人比心心~~。

在网页中显示一个爱心，有3中方式：

    1.图片： 使用图片的方式有两个缺点，一是要请求资源并且图片放大后如果像素不够会显示的很模糊，第二点不可以任意改变颜色，当需要使用多种不同颜色的爱心的，需要不用的图片。

    2.Canvas：Canvas可以绘制出个性的形状，但是实现起来相当的繁琐，每一个形状都需要一个容器。

    3.CSS：最推荐的方式当然就是使用CSS绘制了。其优点操作简单，参数容易改变，可任意改变大小颜色。

接下来就详细的介绍下实现的过程（注：为了让大家更好的理解形成的过程，我每一步都独立了出来，代码较多，因此我并没有对CSS进行兼容处理，在实际的运用中加以注意，要进行兼容性的处理）

直接上图：

每一个爱心只需要一个div就可实现，下面的每一步的详细CSS代码，可以对照每一步之间CSS的区别所对应图形的改变

HTML部分

<div class="hearts-group">
      <div class="hert1 hearts"></div>
      <div class="hert2 hearts"></div>
      <div class="hert3 hearts"></div>
      <div class="hert4 hearts"></div>
      <div class="hert5 hearts"></div>
      <div class="hert6 hearts"></div>
      <div class="hert7 hearts"></div>
</div>

CSS部分（使用的stylus语法）

扫描二维码关注公众号，回复： 8984374 查看本文章

        .hearts-group
            position relative
            height 100px 
            border-bottom 1px solid #666666
            .hearts
                display inline-block
                position absolute
                height 30px
                width 30px
                margin 15px
                background red
            .hert2
                transform rotate(45deg)
                left 70px
            .hert3
                transform rotate(45deg)
                left 130px
                &:before
                    content ''
                    display inline-block
                    position absolute
                    width 30px 
                    height 30px 
                    background pink
                    border-radius 50%
            .hert4
                transform rotate(45deg)
                left 190px
                &:before
                    content ''
                    display inline-block
                    position absolute
                    width 30px 
                    height 30px 
                    background pink
                    border-radius 50%
                    left -15px
            .hert5
                transform rotate(45deg)
                left 250px
                &:before
                    content ''
                    display inline-block
                    position absolute
                    width 30px 
                    height 30px 
                    background pink
                    border-radius 50%
                    left -15px
                &:after
                    content ''
                    display inline-block
                    position absolute
                    width 30px 
                    height 30px 
                    background yellow
                    border-radius 50%
            .hert6
                transform rotate(45deg)
                left 310px
                &:before
                    content ''
                    display inline-block
                    position absolute
                    width 30px 
                    height 30px 
                    background pink
                    border-radius 50%
                    left -15px
                &:after
                    content ''
                    display inline-block
                    position absolute
                    width 30px 
                    height 30px 
                    background yellow
                    border-radius 50%
                    top -15px
            .hert7
                transform rotate(45deg)
                left 370px
                &:before
                    content ''
                    display inline-block
                    position absolute
                    width 30px 
                    height 30px 
                    background red
                    border-radius 50%
                    left -15px
                &:after
                    content ''
                    display inline-block
                    position absolute
                    width 30px 
                    height 30px 
                    background red
                    border-radius 50%
                    top -15px