使用snowfall.jquery.js实现爱心满屏飞的效果


Posted in Javascript onJanuary 05, 2017

小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果。

第一步:

         利用伪元素before和 :after画两个重叠在一起的长方形,如图所示:

使用snowfall.jquery.js实现爱心满屏飞的效果

<!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.jquery.js实现爱心满屏飞的效果       

.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.jquery.js实现爱心满屏飞的效果    

.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就能实现,效果图如下:

使用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.jquery.js实现爱心满屏飞的效果

小的爱心,需改变以下属性的值: 

.snowfall-flakes:before,
  .snowfall-flakes:after {
   width: 10px;
   height: 16px;
   border-radius: 10px 10px 0 0;
  }
  .snowfall-flakes:after {
   left: 4px;
  }

以上所述是小编给大家介绍的使用snowfall.jquery.js实现爱心满屏飞效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
js控制div弹出层实现方法
May 11 Javascript
JS匿名函数实例分析
Nov 26 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
js转换对象为xml
Feb 17 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
JS实现扫雷项目总结
May 19 Javascript
jQuery实现动态文字搜索功能
Jan 05 #Javascript
JS实现HTML标签转义及反转义
Apr 14 #Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 #Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 #Javascript
如何提高Dom访问速度
Jan 05 #Javascript
AngularJS中run方法的巧妙运用
Jan 04 #Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 #Javascript
You might like
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
python模块之re正则表达式详解
2017/02/03 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
django中瀑布流写法实例代码
2019/10/14 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
幼儿园教育教学反思
2014/01/31 职场文书
环保倡议书400字
2014/05/15 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android