首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用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实现爱心满屏飞效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

爱喝酸奶的吃货

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 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
伪静态(1) Windows server 2012(17) 日志格式分析(1) destoon(1) lnmp(1) 组策略(1) Centos(8) lamp(1)  AD域(1) Rewrite(4)
You might like
几个实用的PHP内置函数使用指南
2014/11/27 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
js this函数调用无需再次抓获id，name或标签名
2014/03/03 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
pygame实现打字游戏
2021/02/19 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
运动会入场词50字
2014/02/20 职场文书
高一学生评语大全
2014/04/25 职场文书
减负增效提质方案
2014/05/23 职场文书
中秋手机店促销方案
2014/06/16 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
社保转移委托书范本
2014/10/08 职场文书
六年级学生评语大全
2014/12/26 职场文书
教师年度个人总结
2015/02/11 职场文书
简短清晨问候语
2015/11/10 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL