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

Myth丶恋晨 2022-09-03 15:26 155阅读 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 条评论，155人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 css3 :hover添加特效

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

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

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

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

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

相关 HTML和CSS入门（3）

页面布局 1.盒子模型盒子模型规定了元素框处理元素内容、内边距、边框、和外边距的方式。 ![这里写图片描述][SouthEast] 在css中，width和

ゝ一纸荒年。/ 2022年06月06日 09:58/ 0 赞/ 127 阅读

相关 HTML5和Css3

一.语义化标签 1.<header> 表示页眉(头部) 2.<article>文章 3.<aside>侧边栏 4

刺骨的言语ヽ痛彻心扉/ 2022年02月25日 12:36/ 0 赞/ 196 阅读

相关 Day3:html和css

![标题图][201812241616168] > Day3:`html`和`css` 多类名选择器样式的显示效果是跟`html`元素中的类名先后顺序无关,而是跟`

柔情只为你懂/ 2021年09月17日 10:10/ 0 赞/ 280 阅读