!
也想出现在这里? 联系我们
广告位
当前位置:首页>技术分享>编程技术>雪花飘落效果源码分享(雪花飘飘特效)

雪花飘落效果源码分享(雪花飘飘特效)

好长一段时间没有更新文章了,主要原因是最近忙于过年没怎么折腾网站确实不知道更新些什么了,心想着再不更新博客就要长草了。俗话说的好“车到山前必有路”,既然最近一直在忙于过年,那么分享一篇与过年这个节日相关的文章想来应该是极好的,思考了半天决定整理分享下“雪花飘落效果”的源码比较好,遂有了这篇文章,经过多方比较,觉的雅兮网的这段源码无论从部署难易度还是从代码简洁性来看都是很不错的,我自己也使用上了这段代码为博客烘托下节日气氛。代码部分有些细微改动以进一步简化大家部署的困难,下面将具体部署方法分享一下。

雪花飘落效果源码分享(雪花飘飘特效)

雪花图片

在网站根目录下新建一个名为 snow 的文件夹,将雪花图片文件分别命名为 snow0.gif、 snow1.gif、 snow2.gif、 snow3.gif ,然后丢在该文件夹下。

#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 25%;
}
#gallery-1 img {
border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

雪花飘落效果源码分享(雪花飘飘特效)
雪花飘落效果源码分享(雪花飘飘特效)
雪花飘落效果源码分享(雪花飘飘特效)
雪花飘落效果源码分享(雪花飘飘特效)


JS 代码

将以下代码保存为 snow.js 文件并丢在上面新建的 snow 文件中即可。

注意代码中文件名及相应路径。

引入文件

使用如下代码在需要显示雪花效果的页面中进行调用。WordPress用户一般将代码添加到 header.php 或者 footer.php文件中即可,如果只想在文章页面显示,直接将代码添加到 single.php 文件中即可。

因为需要使用的文件比较零散,这里提供下文件的下载。

给TA打赏
共{{data.count}}人
人已打赏
编程技术

理清 HTML/CSS/JS 中相对路径的问题

2022-9-17 16:30:19

编程技术

百度进军区块链,还不快抓紧领养一只莱茨狗

2022-9-17 16:31:07

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 2651636361@qq.com 或点击右侧 私信:少羽 反馈,我们将尽快处理。
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索