将下面的代码复制到你的设置栏下页眉html代码框中即可

< script >

(function($) {
$.fn.snow = function(options) {
var $flake = $('<div id="flake" />').css({
'position': 'absolute',
'top': '-50px'
}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize: 10,
maxSize: 20,
newOn: 500,
flakeColor: "#FFFFFF"
},
options = $.extend({},
defaults, options);
var interval = setInterval(function() {
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},
durationFall, 'linear',
function() {
$(this).remove()
});
},
options.newOn);
};
})(jQuery);
$.fn.snow({
minSize: 5,
maxSize: 50,
newOn: 1000,
flakeColor: '#FFF'
});

< /script>

转载于:https://www.cnblogs.com/yonyong/p/8082231.html

如何在你的blog中添加炫酷的飘雪动画效果相关推荐

  1. 西门子界面官方精美触摸屏+WINCC程序模板 西门子官方触摸屏程序模板,炫酷的扁平式动画效果,脚本动画,自动生成二维码,可仿真,堪比智能手机,有精简,精致,wincc,无线面板等包含了所有西门子人机界

    西门子界面官方精美触摸屏+WINCC程序模板 西门子官方触摸屏程序模板,炫酷的扁平式动画效果,脚本动画,自动生成二维码,可仿真,堪比智能手机,有精简,精致,wincc,无线面板等包含了所有西门子人机界 ...

  2. android自定义图片过渡效果,教你做出炫酷的Android动画效果

    前言 Android动画也是Android系统中一个很重要的模块, 在平时开发中, 为了做出炫酷的效果, 动画可以说是必不可少的; 本文将总结Android中与动画相关的部分, 文中部分内容整理自文末 ...

  3. 球体动画Android,使用CSS创建一个炫酷的球体动画效果

    我最近看到了一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍. 1.使用Jade和SCSS生成一个圆圈 创建一个圆圈的第一步是生成所有组成圆圈的粒子. ...

  4. 前端实现炫酷动效_web前端入门到实战:使用CSS创建一个炫酷的球体动画效果

    一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍. 1.使用Jade和SCSS生成一个圆圈 创建一个圆圈的第一步是生成所有组成圆圈的粒子.有了Jade ...

  5. 【OneAPM】极客编程挑战#025:发挥想象生成漂亮炫酷的SVG动画效果

    活动链接:http://www.gbtags.com/gb/share/5610.htm 本期挑战 提供如下的SVG图形,请使用任何技术生成基于如下SVG图形的动画效果,看看谁设计的动画效果最酷 ~~ ...

  6. 用html怎么做动态立体图形,使用CSS创建一个炫酷的球体动画效果

    我最近看到了一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍. 1.使用Jade和SCSS生成一个圆圈 创建一个圆圈的第一步是生成所有组成圆圈的粒子. ...

  7. 华为手机线刷工具_原来华为手机自带视频剪辑工具!简单操作几步,就能添加炫酷特效...

    短视频是两年很火的社交手段之一,不管是在微博还是微信朋友圈了,很多朋友都喜欢使用视频来表达自己的动态. 有些朋友为了让自己的视频更加好看,就给视频添加字幕.音乐.动画等元素,但这些操作都要使用第三方工 ...

  8. PPT中如何做炫酷帘幕动画?操作很简单,一起看看吧

    在制作PPT时很多特效操作看起来很新颖很简单,但是想要操作却无从下手.今天小编为大家挑选PPT中两种常见的炫酷特效,分别为炫酷帘幕动画和文字透视,下面为大家献上制作方法,赶快上手试试吧! 制作炫酷帘幕 ...

  9. 让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果

    前端时间有个需求是客户端双端APP内嵌入整个转盘抽奖的web子系统,具体是要在后台能够控制大转盘抽奖的奖项数,和用户免费抽奖的次数,并且免费抽奖使用完,用户可以观看广告进行抽奖或使用积分抽奖.正好最近 ...

  10. css3个性loading,css3 中实现炫酷的loading效果

    •今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 •js需要引入jquery 只用到了一点点js •先看效果图 html: 加载中 . . . css: ...

最新文章

  1. 媒体查询 响应式设计
  2. 云信技术系列课 | RTC 系统音频弱网对抗技术发展与实践
  3. 025 使用@Profile完成环境条件注入
  4. ironpython console怎么用_如何在表單中插入ironpython控制台?
  5. Linux下限制用户通过SFTP访问指定目录
  6. 苹果 Apple Id 不同区域的不同点
  7. 锐捷计算机教室排顺序,大学四年说话最多的一堂课是在锐捷智慧教室
  8. 你知道PDF拆分合并怎么弄吗?两个方法帮你轻松搞定!
  9. drupal8 修改主题_Drupal 8主题修订版-更新和新功能
  10. scala中的Unit
  11. 传智播客学习之DOM基础
  12. win7 重装系统变 win10
  13. 微信公众号运营助手,可以在手机上回复粉丝留言
  14. 百度hacked事件看谷歌real-time search
  15. 人工智能入门(一) Torch基本使用
  16. 串口/COM口、USB、RS232、RS422、RS485的区别
  17. 重学Android基础系列篇(二):泛型
  18. 计算机对中药学作用,计算中药学
  19. Tera-Store高速数据采集存储系统
  20. 飞信与QQ、MSN的一些限制上的区别

热门文章

  1. 如何阻止 AcrobatPro DC自动更新升级?
  2. DMclone for Mac(磁盘克隆软件)
  3. 如何在 macOS 中批量重命名文件?
  4. 如何为Mac视频添加模糊效果?
  5. React-Native从搭建环境到 发布 APP 指北
  6. c#简易学生信息管理系统
  7. JS版日期格式化和解析工具类
  8. Difference between natural join and inner join
  9. HTML5离线存储 初探
  10. Linux yum安装unrar、rar