小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果。
第一步:
利用伪元素before和 :after画两个重叠在一起的长方形,如图所示:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style media="screen">body {overflow-y: hidden;}.heart-body {width: 500px;margin: 100px auto;position: relative;}.snowfall-flakes:before,.snowfall-flakes:after {content: "";position: absolute;left: 0px;top: 0px;display: block;width: 30px;height: 46px;background: red;border-radius: 50px 50px 0 0;}</style></head><body><div class="heart-body"><div class="snowfall-flakes"></div></div></body></html>
第二步:
利用 transform 属性将两个两个伪元素分别旋转负45度、45度,如图所示:
.snowfall-flakes:before {-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);}.snowfall-flakes:after {-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);}
第三步:
利用 left 属性,将伪元素 after 向左偏移一定像素,使两个微元素部分重叠,组成爱心样子,如图所示:
.snowfall-flakes:after {left: 13px;-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);}
爱心我们画完了,那么怎么让爱心实现满屏飞呢,其实只需要调用jquery.js和 snowfall.jquery.js就能实现,效果图如下:
代码如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style media="screen">body {overflow: hidden;}.heart-body {width: 500px;margin: 100px auto;position: relative;}.snowfall-flakes:before,.snowfall-flakes:after {content: "";position: absolute;left: 0px;top: 0px;display: block;width: 30px;height: 46px;background: red;border-radius: 50px 50px 0 0;}.snowfall-flakes:before {-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);}.snowfall-flakes:after {left: 13px;-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);}</style></head><body><script src="js/jquery.js" type="text/javascript"></script><script src="js/snowfall.jquery.js"></script><script>//调用飘落函数 实现飘落效果$(document).snowfall({flakeCount: 50 //爱心的个数});</script></body></html>
其实小颖觉得爱心画小一点比较好看,上面画那么大其实是为了方便大家看爱心更明显一些,小颖把爱心画小后,就好看多了,效果图如下:
小的爱心,需改变以下属性的值:
.snowfall-flakes:before,.snowfall-flakes:after {width: 10px;height: 16px;border-radius: 10px 10px 0 0;}.snowfall-flakes:after {left: 4px;}
希望小颖的分享大家喜欢哦,嘻嘻,下班喽,小颖要回家喽