jQuery canvas实现圣诞下雪效果

所属分类:其他-动画效果

 29012  299  查看评论 (8)
分享到微信朋友圈
X
jQuery canvas实现圣诞下雪效果 ie兼容9

使用:

第一步:先在html页面引入相应的JS文件,并调用方法

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.let_it_snow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//闪光
   $("canvas.flare").let_it_snow({
   windPower: 0,
   speed: 0,
   color: "#392F52",
   size:120,
   opacity: 0.00000001,
   count: 40,
   interaction: false
   });
//雪花
   $("canvas.snow").let_it_snow({
   windPower: 3,
   speed: 1,
   count: 250,
   size: 0
   });
//小碎片
   $("canvas.flake").let_it_snow({
   windPower: -3,
   speed: 1,
   count: 20,
   size: 10,
   image: "images/white-snowflake.png"
   });
});
</script>

第二步:html代码结构

<canvas width="100%" height="100%" class="flare"></canvas>
<canvas width="100%" height="100%" class="snow"></canvas>
<canvas width="100%" height="100%" class="flake"></canvas>
<div style="text-align:center;"></div>

完成!

相关插件-动画效果

纯CSS3实现打火机火焰动画

这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效。另外要说明的是,整个动画都是利用纯CSS3实现的
  动画效果
 28844  242

jquery_dataStatistics动态数字翻页特效插件

在固定时间内翻页到你想要显示的数字
  动画效果
 43594  348

HTML5+CSS3音量调节旋转按钮

可以拨动让物体旋转,很不错
  动画效果
 32268  305

jQuery直播点击飘心效果,点赞桃心飘动效果

直播点击飘心效果,点赞桃心飘动效果,canvas画出桃心飘动效果
  动画效果
 34356  308

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    小屁孩儿 0
    2017/11/7 17:59:39

    就能插入一张图片啊

    回复
    Abdomeni丶 0
    2017/8/5 9:54:12
    熊晓晓 0
    2017/3/23 15:47:41

    能不能也发给我

    回复
    落叶&随风 0
    2017/3/15 18:45:26

    能不能把这个发给我呀,嘤嘤嘤...

        熊晓晓0
        2017/3/23 15:44:41

        我也想要

    回复
    change 0
    2017/2/24 22:04:26
    nanbei 0
    2017/1/24 13:36:48
    很漂亮啊
        一空0
        2017/3/10 9:50:30

        很喜欢

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复