【HTML】使用css3和html给网站添加上春节灯笼特效

Myth丶恋晨 2022-09-03 15:26 203阅读 0赞

马上就过年了，网站也可以装饰一下，本文就教大家如何使用css和html代码给你网站添加上一对新年灯笼。

![1da4149dc2e3c9ff345f78971a489737.png][]

这个灯笼特效可以加到任何网站上面，不管你是不是用的WordPress搭建的网站都可以。

具体的方法如下：

1、复制下面的代码添加到网站的页脚文件。

<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.引入CSS，复制下面的代码到`</head>`前

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/muzihuaner/deng@main/deng.css">

保存完毕，上传就可以看到效果了。

Github:[https://github.com/muzihuaner/deng/][https_github.com_muzihuaner_deng]

[1da4149dc2e3c9ff345f78971a489737.png]: /images/20220829/0ad55dc6c12d4f738ff5dbe23dba4c1a.png
[https_github.com_muzihuaner_deng]: https://github.com/muzihuaner/deng/

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关过年给网站加一对灯笼CSS代码

马上快过年了，给网站加一对红灯笼，这样才有过年的喜庆劲儿。灯笼是代码生成的无需图片，而且还会摆动。使用![b031a5c1af1a48c4ac6db13504ff529f

Love The Way You Lie/ 2024年03月16日 12:36/ 0 赞/ 17 阅读

相关 HTML5+CSS3 使用变形特效-＞模仿课工场

效果: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h

痛定思痛。/ 2023年10月05日 09:34/ 0 赞/ 41 阅读

相关使用 css3 和 html 给网站添加上春节灯笼特效

先上效果图 ![20200121112926.png][] 1、复制下面的代码添加到网站的页脚文件。  <div class=

阳光穿透心脏的1/2处/ 2023年07月02日 02:20/ 0 赞/ 24 阅读

相关 Html+Css3实现一个摩天轮特效

<!doctype html> <html> <head> <meta charset="utf-8"> <title>标题</ti

左手的ㄟ右手/ 2022年11月07日 01:53/ 0 赞/ 155 阅读

相关 css3+html翻书本动画网页js特效

[下载地址][Link 1] css3+html实现的翻书本动画网页特效，可以当做loading使用。 ![1633956912.png][] dd: [Link 1

系统管理员/ 2022年09月16日 04:49/ 0 赞/ 232 阅读

相关 HTML+CSS3彩色旋转动画js特效

[下载地址][Link 1] HTML+CSS3彩色旋转动画特效，五彩斑斓的圆点旋转网页特效。 ![1632803206.png][] dd: [Link 1]: h

小咪咪/ 2022年09月13日 14:20/ 0 赞/ 464 阅读

相关 JS_HTML5+CSS3实现数字滚动特效

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5q2qIHwg5

野性酷女/ 2022年09月11日 01:26/ 0 赞/ 514 阅读

相关【HTML】使用css3和html给网站添加上春节灯笼特效

马上就过年了，网站也可以装饰一下，本文就教大家如何使用css和html代码给你网站添加上一对新年灯笼。 ![1da4149dc2e3c9ff345f78971a489737.

Myth丶恋晨/ 2022年09月03日 15:26/ 0 赞/ 204 阅读

相关 css3 :hover添加特效

为改变hover动画效果，可以为hover添加transition 增加过度效果 1、第一种写法（事件前有动画效果）： <style> body{ padd

亦凉/ 2022年08月22日 05:53/ 0 赞/ 437 阅读

相关 CSS3 HTML5下雪特效雪花飘飘

<!doctype html> <html lang="en"> <head> <meta charset=utf-8 /> <titl

阳光穿透心脏的1/2处/ 2022年08月13日 14:46/ 0 赞/ 268 阅读