使用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 click([data],fn)使用方法实例介绍
Jul 08 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
vue filters的使用详解
Jun 11 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
javascript实现考勤日历功能
Nov 29 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通用检测函数集合
2011/02/08 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
python实现媒体播放器功能
2018/02/11 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
向领导表决心的话
2014/03/11 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
庆国庆活动总结
2014/08/28 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
机关作风建设心得体会
2014/10/22 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
你真的会用Mysql的explain吗
2022/03/31 MySQL