为网站添加灯笼及飘雪特效
为网站添加灯笼及飘雪特效
十玖八柒
发布于 2022-08-01 02:10:56
发布于 2022-08-01 02:10:56
代码可运行
运行总次数：0
代码可运行
喜迎
新春
特效默认手机端不显示，需要查看效果的请使用电脑端查看
灯笼样式（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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-01-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
【HTML | CSS】春节将至，为网页挂上精美的灯笼吧（附源码）程序员的浪漫
更多 >
腾讯云开发者
