CSS3做个爱心送给你的爱人

之前有在网上看到过别人做的一个爱心图形,非常好看,今天尝试着自己做了一个,虽然看起来有点别扭,但也分享一下吧。

做这个爱心主要是牵扯到css3的border-radius属性以及transform属性。爱心看起来用css制作有点困难,但当你学会能够庖丁解牛的时候就觉得其实不过尔尔。将爱心拆分成若干个我们已经学会制作的几个图形然后再组合起来就可以了。

爱心可以拆分成两个矩形,且上边的两个角为圆角,接着将两个图形一个左旋转,一个右旋转,然后调整两个图形距离,部分重合后便有了爱心的模样。

文字有点抽象了些,还是直接看图吧,我用FW做几个图做演示。

1、做两个矩形,并把上边的角变成圆角。

做两个矩形

2、分别顺逆时针旋转45度。

旋转

3、调整俩图位置使其部分重合,这样一个爱心就出来了。

调整位置

了解这些,代码写起来也就简单了。

第一步:俩矩形

<div id = "container">  
  <div id = "l"></div>
  <div id = "r"></div>
</div>

圆角的话就要使用css3的border-radius属性。

border-radius: 45px 45px 0 0;

2、旋转就要用到css3的transform属性,因为一个是顺时针一个逆时针,所以要分别设置。

  #l { 
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #r {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

3、调整位置,给容器元素设置position:relative;并给俩子元素设置position:absolute; 通过left属性来让俩图重合。太过简单就不挨个介绍了,直接看jsfiddle,请点击result查看效果。

自己调整高宽以及位置可以让爱心更好看一点,这里大家自己发挥吧。看到网上的方法是放置一个元素,并通过:before和:after伪类来设置图形,基本上原理差不多,这里不赘述,或许有空专门做一个。