将下面的代码复制到你的设置栏下页眉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>

如何在你的blog中添加炫酷的飘雪动画效果的更多相关文章

  1. 8个超炫酷仿HTML5动画源码

    1.jQuery万年历插件 带农历老皇历功能 这是一款基于jQuery的日历插件,这款日历插件和之前分享的日历控件有很大差异,它是一本万年历,包含了农历已经老皇历的功能,是一个挑好日子的工具.同时日历 ...

  2. 使用css实现炫酷的横屏滚动效果

    炫酷的横屏滚动效果css实现 DEMO: https://codepen.io/kobako/pen/BxVLLm 我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是 ...

  3. UITableView中cell点击的绚丽动画效果

    UITableView中cell点击的绚丽动画效果 本人视频教程系类   iOS中CALayer的使用 效果图: 源码: YouXianMingCell.h 与 YouXianMingCell.m / ...

  4. 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  5. 在Bash中定制炫酷的命令提示符

    如果你使用的是Linux桌面(例如:Fedora或者Ubuntu)的话,在Terminal上使用Bash通常是必须地,但是默认的Bash提示符都很普通.本文将提供简单的Bash脚本(通过定制PS1)定 ...

  6. 手把手带你做一个超炫酷loading成功动画view Android自定义view

    写在前面: 本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需要,那么就以本篇来结尾 ...

  7. Swift 自定义炫酷下拉刷新效果

    先来看下效果 下拉刷新 其实下拉刷新没大家想得那么难.本文已第二个为例子.给大家讲解下下拉刷新的做法(完整代码后面会放上) 首先,先搞一个single View Application .然后进Mai ...

  8. iOS添加到购物车的简单动画效果

    #pragma mark - 添加到购物车的动画效果 // huangyibiao - (void)addAnimatedWithFrame:(CGRect)frame { // 该部分动画 以sel ...

  9. WebGIS简单实现一个区域炫酷的3D立体地图效果

    1.别人的效果 作为一个GIS专业的,做一个高大上的GIS系统一直是我的梦想,虽然至今为止还没有做出一个理想中的系统,但是偶尔看看别人做的,学习下别人的技术还是很有必要的.眼睛是最容易误导我们的,有时 ...

随机推荐

  1. git使用教程之了解git

    1.理解git快照 快照的作用就相当于将旧文件所占的空间保留下来,并且保存一个引用,而新文件中会继续使用与旧文件内容相同部分的磁盘空间,不同部分则写入新的磁盘空间.git有一个HEAD指针,这个指针可 ...

  2. Android 开发笔记___alertDialog

    public class AlertActivity extends AppCompatActivity implements OnClickListener { private TextView t ...

  3. 用cmd命令创建oracle 数据库、用户和表空间

    Win+R调查运行窗口,输入cmd回车 连接到本地oracle库 创建名为"SXSJ"的表空间,其初始大小为512M,支持自动扩展,每次增量为32M: create tablesp ...

  4. windows系统扩展C盘的工具推荐(解决了C盘和压缩卷不相邻无法扩展C盘问题)

    1.下载分区工具 “分区助手3.0中文版” 下载地址:http://www.33lc.com/soft/14880.html 2.下载下来是一个压缩包,解压后运行安装程序. 3.安装完成后按以下步骤执 ...

  5. [ASP.NET Core 2.0 前方速报]Core 2.0.3 已经支持引用第三方程序集了

    发现问题 在将 FineUIMvc(支持ASP.NET MVC 5.2.3)升级到 ASP.NET Core 2.0 的过程中,我们发现一个奇怪的现象: 通过项目引用 FineUICore 工程一切正 ...

  6. C#Session丢失问题的解决办法

    关于c# SESSION丢失问题解决办法   我们在用C#开发程序的时候经常会遇到Session很不稳定,老是数据丢失.下面就是Session数据丢失的解决办法希望对您有好处.1.在WEB.CONFI ...

  7. 基于Spring开发的一个BIO-RPC框架(对新人很友好)

    PART1:先来整体看下项目的构成 其中bio-rpc-core就是所谓的rpc框架 bio-rpc-example-client即所谓的服务调用方(你的项目中想要调用服务的地方) bio-rpc-e ...

  8. java SE 基础概念梳理(一)

     (一)First 摘要:Java概述.Java开发环境搭建.程序开发流程 Java概述  Java的应用 开发QQ.迅雷程序(桌面应用软件)开发淘宝.京东(互联网应用软件) Java的擅长 互联网: ...

  9. C# 跨平台的支付类库ICanPay

    随着微软的开源,越来越多的项目支持跨平台,但是各种支付平台提供的类库,又老又不支持跨平台,吐槽下,尤其是微信,还有好多坑,于是ICanPay诞生了,今天就来讲ICanPay是什么,怎么使用? ICan ...

  10. sqli-libs

    这是抄袭你们  铃兰师姐总结的,尽管她很不情愿. (现在只是第八关,相信她会努力的,一定会做完,我也会随时在这个上面更新的,这个是在本地搭建的,想要这个的可以找你们铃兰师姐要啊!!!) less-1: ...