首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >网页开发背景出现下雪特效

网页开发背景出现下雪特效

作者头像
OECOM
发布2020-07-01 17:53:59
3.1K0
发布2020-07-01 17:53:59
举报
文章被收录于专栏:OECOMOECOM

2015-05-22 17:11:09

今天我来给大家介绍一种网页特效,这种网页特效是是背景出现下雪的效果,非常的绚丽。如果说下雪不太适合自己的网页,需要飘落一些花瓣或心之类的,那么同样可以使用这个特效,只填一张图片即可实现,废话就不多说了,直接了看代码吧。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页下雪特效--落帆亭</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<script src="js/jq.snow.js"></script>
<!--下面是调用方法和参数说明-->
<script>
$(function(){
    $.fn.snow({
        //Container:'.aixin',//这里是你想在哪个元素处出现雪花,这里可以是class也可以是id
                  minSize: 5, //雪花的最小尺寸
                  maxSize: 50, //雪花的最大尺寸
                  newOn: 300 //雪花出现的频率 这个数值越小雪花越多
                  //content:'<img src="images/xin.png" style="width:100%">',//这里是你想用的图片,如果不写这行代码,则默认为雪花
                 //  documentHeight :$(".aixin").height(),
                 //  documentWidth :$(".aixin").width(),
                 //  flakeColor : "#ff2727"
    });
});
</script>
</head>
<body style="background:#3B3B3B; color:#ccc;">

<div style="text-align:center;margin: 0;padding:0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

这就是简单的在html代码里调用下雪的这个特效,当然这个效果并不是这么简单,还需要有一点点的js控制,这里我将他封装在了一个js文件里,只需要在使用时引入即可。本站提供下载链接和演示效果,有兴趣的朋友可以看一下。

在线预览链接:预览,下载的话从预览里面直接从socure目录里下载吧

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-05-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档