Z次元
文章 笔记 日志
专题
专栏分类 文章归档
友链
友情链接 朋友圈
交流
留言 关于我
头像
系列文章
-
-
-
-
为网站添加灯笼及飘雪特效
系列文章
网站搭建
最后更新:2024/12/15|创建时间:2021/1/23

为你的网站添加灯笼及飘雪特效,增加节日氛围

特效默认手机端不显示,需要查看效果的请使用电脑端查看

灯笼样式(1)

代码如下:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/css/lantern.css">
<div class="deng-box">
        <div class="deng">
            <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b">
                    <div class="deng-t">喜迎</div>
                </div>
            </div>
            <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>
        </div>
    </div>
    <div class="deng-box1">
        <div class="deng">
            <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b">
                    <div class="deng-t">新春</div>
                </div>
            </div>
            <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>
        </div>
    </div>

图片

灯笼样式(2)

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/css/redLantern.css">
<div class="dengl">
        <div class="d-box">
            <div class="d1"><span></span><span>
                    <p></p>
                </span>
                <ul>
                    <li></li>
                    <li> </li>
                    <li><span></span></li>
                    <li> </li>
                    <li> </li>
                </ul>
            </div>
            <div class="d2"><span></span><span>
                    <p></p>
                </span>
                <ul>
                    <li></li>
                    <li> </li>
                    <li><span></span></li>
                    <li> </li>
                    <li> </li>
                </ul>
            </div>
        </div>
        <div class="d-box1">
            <div class="d1"><span></span><span>
                    <p></p>
                </span>
                <ul>
                    <li></li>
                    <li> </li>
                    <li><span></span></li>
                    <li> </li>
                    <li> </li>
                </ul>
            </div>
            <div class="d2"><span></span><span>
                    <p></p>
                </span>
                <ul>
                    <li></li>
                    <li> </li>
                    <li><span></span></li>
                    <li> </li>
                    <li> </li>
                </ul>
            </div>
        </div>
    </div>

图片

飘雪特效

添加如下代码:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/css/snow.css">
<script src="https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/js/snow.js"></script>
<canvas id="Snow"></canvas>
版权声明
本文依据 CC-BY-NC-SA 4.0 许可协议授权,请您在转载时注明文章来源为 Z次元 ,若本文涉及转载第三方内容,请您一同注明。
更多专栏文章推荐
网站搭建
将Hexo部署到腾讯云轻量应用服务器
2020/12/28
网站添加Live2d的看板娘——伊斯特瓦尔(Histoire)
2020/12/12
Z次元——开源博客项目
2025/3/16
Umami:部署自己的网站访问统计工具
2025/2/16
评论区
发表评论
回复
0

1

0012024年5月20日

比心

回复
x

1

xing2022年1月27日

这个取了,感谢

灯笼样式(1)
灯笼样式(2)
飘雪特效
目录
灯笼样式(1)
灯笼样式(2)
飘雪特效
喜迎
新春
十玖八柒
每天进步多一点
欢迎到访φ(゜▽゜*)♪
最新评论
个人占星:

想给自己的网站弄个统计功能,但不会弄,头疼

永恒末匕:

好哇塞,这个厉害

十玖八柒:

测试图片发送

Corwin: @十玖八柒

哎 主要是我的个人网站用的是静态的cos 实现评论框还是有点困难

我的
个人主页
站点地图
RSS订阅
导航
十年之约
虫洞穿梭
全站友链
虚位以待
©2020 - 2025 By 十玖八柒 版权所有
豫ICP备20021466号