使用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 相关文章推荐
window.location 对象所包含的属性
Oct 10 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
JS实现购物车特效
Feb 02 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
JS中FormData类实现文件上传
Mar 27 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的错误信息
2006/10/09 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
python常用知识梳理(必看篇)
2017/03/23 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python3中函数参数的四种简单用法
2018/07/09 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
二年级班级文化建设方案
2014/05/10 职场文书
竞选学委演讲稿
2014/09/13 职场文书
大学生实习介绍信
2015/05/05 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL