在网页用我们经常需要用到爱心❤,比如说给文章点赞,或者给你喜欢的人比心心~~。
在网页中显示一个爱心,有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语法)
.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