小颖在上一篇一步一步教你用半铸钢钢性铸铁(铸造半钢)画爱心中已经分享一种画爱心的方法，这次再分享一种方法用钢性铸铁画爱心，并利用降雪。jquery.js实现爱心满屏飞的效果。

第一步：

利用伪元素以前和：after画两个重叠在一起的长方形，如图所示：

！DOCTYPE html html head meta charset=' utf-8 ' title/title style media=' screen ' body { overflow-y :隐藏；} .心脏-身体{宽度： 500像素；余量： 100像素自动；相对位置：} .之前的降雪{内容： }之后的降雪量；绝对位置：left : 0pxtop : 0pxdisplay :块；宽度： 30px高度： 46px背景：红色；边界半径： 50px 50px 0 0}/style/head body div class=' heart-body ' div class='降雪-雪花/div /div/body/html第二步：

利用改变属性将两个两个伪元素分别旋转负45度、45度，如图所示：

。在{ -webkit-transform:旋转(-45 )之前的降雪-薄片：/* Safari和chrome */-moz-变压器：旋转(-45 );/* Firefox */-ms-transform:旋转(-45 );/* IE 9 */-o型变压器： 旋转(-45 );/* Opera */transform:旋转(-45 );} .{ -webkit-transform:旋转(45 )后的降雪量片：/* Safari和chrome */-moz-变压器：旋转(45 );/* Firefox */-ms-transform:旋转(45 );/* IE 9 */-o型变压器： 旋转(45 );/* Opera */transform:旋转(45 );}第三步：

利用左边的属性，将伪元素在.之后向左偏移一定像素，使两个微元素部分重叠，组成爱心样子，如图所示：

。{ left : 13px-web kit-transform :旋转(45 );/* Safari和chrome */-moz-变压器：旋转(45 );/* Firefox */-ms-transform:旋转(45 );/* IE 9 */-o型变压器： 旋转(45 );/* Opera */transform:旋转(45 );}爱心我们画完了，那么怎么让爱心实现满屏飞呢，其实只需要调用jquery.js和降雪。jquery.js就能实现，效果图如下：

代码如下：

！DOCTYPE html html head meta charset=' utf-8 ' title/title style media=' screen ' body {溢出：隐藏；} .心脏-身体{宽度： 500像素；余量： 100像素自动；相对位置：} .之前的降雪{内容： }之后的降雪量；绝对位置：left : 0pxtop : 0pxdisplay :块；宽度： 30px高度： 46px背景：红色；边界半径： 50px 50px 0 0} .在{ -webkit-transform:旋转(-45 )之前的降雪-薄片：/* Safari和chrome */-moz-变压器：旋转(-45 );/* Firefox */-ms-transform:旋转(-45 );/* IE 9 */-o型变压器： 旋转(-45 );/* Opera */transform:旋转(-45 );} .{ left : 13px-web kit-transform :旋转(45 );/* Safari和chrome */-moz-变压器：旋转(45 );/* Firefox */-ms-transform:旋转(45 );/* IE 9 */-o型变压器： 旋转(45 );/* Opera */transform:旋转(45 );}/style/head body脚本src=' http : js/jquery。js ' type=' text/JavaScript '/script script src=' http : js/降雪。jquery.js调用飘落函数实现飘落效果$(文档)。降雪量({ Flacount : 50//爱心的个数});/脚本/正文/html其实小颖觉得爱心画小一点比较好看，上面画那么大其实是为了方便大家看爱心更明显一些，小颖把爱心画小后，就好看多了，效果图如下：

小的爱心，需改变以下属性的值：之前的降雪。{ width : 10px }之后的降雪片：height: 16pxborder-radius : 10px 10px 0 0；} .{ left : 4px }之后的降雪片：}以上是使用snower . jquery . js实现爱情全屏效果的介绍。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！