利用snowfall.jquery.js实现爱心满屏飞

小颖在上一篇一步一步教你用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;}

希望小颖的分享大家喜欢哦，嘻嘻，下班喽，小颖要回家喽

转载于:https://www.cnblogs.com/yingzi1028/p/6249767.html

利用snowfall.jquery.js实现爱心满屏飞相关推荐

利用snowfall.jquery.js实现爱心满屏飞或点点满屏飞
<!doctype html> <html><head><title>HTML模板</title><meta charset='utf ...
满屏飞舞的心HTML动画,使用snowfall.jquery.js实现爱心满屏飞的效果
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
snowfall.jquery.js实现页面飘花效果
效果图如下:录制gif的时候有点问题,清晰度大家不用在意哈引入第三方js: 大家可以去官网下载,或者点这自取:https://download.csdn.net/download/tt1847348 ...
让电脑代码满屏飞_程序员想让你的电脑死机，需要多久？
诸多行业中,程序员应该是一个比较特殊的群体,许多人一提起程序员,脑子里除了高新之外,总会不自觉的和木讷.拖沓联系在一起. 而且现在的网络发达,网络中大量的黑程序员的段子,许多人根本没有接触过程序员,但 ...
盈利靠涨价、广告满屏飞，共享充电宝入局容易做大难
出品 | TechWeb 作者 | 懿慈前几年,共享单车的火爆引发了一场共享经济热潮,让很多创业者和投资人趋之若鹜.只是,喧嚣过后,留下一地鸡毛,主力纷纷撤退,要么欠钱找不到人,要么卖身给大厂接盘. ...
母亲大人辛苦了（snowfall.jquery实现爱心掉落）
又是一年一度的母亲节,在这里小汪向所有母亲送上祝福,养育之恩,辛苦您了. 今天看到樱花掉落的背景感觉很好看,然后就搜索使用方法,忽然看到有大佬文章写了一个感恩母亲的文章,我也想写了玩,并发给自己的 ...
HTML5七夕情人节表白网页(情人节满屏爱心HTML5特效) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤情人节满屏爱心HTML5特效❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱 ...
HTML5七夕情人节表白网页(爱心雨-满屏爱心飘落)HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤(爱心雨-满屏爱心飘落)❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
七夕情人节~html+css+javascript实现满屏爱心特效(程序员表白)
❉ 七夕情人节 ❤html+css+j❤实现满屏爱心特效(程序员表白) ❤程序员表白, 很多人和小编一样受到暴击,需要告白的同学加紧了,不要错过这个好时机. ❤许多程序员小伙伴总是苦于找不到合适的告白 ...

利用snowfall.jquery.js实现爱心满屏飞

第一步：

第二步：

第三步：

利用snowfall.jquery.js实现爱心满屏飞相关推荐

最新文章

热门文章