两款网站新年灯笼代码，给你的网站添加喜庆[教程]

已于 2022-12-02 20:04:11 修改
阅读量1.2k 收藏 5
点赞数
文章标签： css3
于 2022-12-02 20:02:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qqsvip520/article/details/128153513
版权

灯笼·样式一

两个灯笼显示在网站顶部右侧，PC、移动端都显示

<!--css代码 青鹿云丨milubk.com-->
<style>
.deng-box{position:fixed;top:40px;right:-50px;z-index:999;}.deng-box1{position:fixed;top:40px;z-index:999;right:-20px;}.deng-box1 .deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,0.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 5s infinite ease-in-out;box-shadow:-5px 5px 30px 4px rgba(252,144,61,1);}.deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,0.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px rgba(250,108,0,1);}.deng-a{width:100px;height:90px;background:#d8000f;background:rgba(216,0,15,0.1);margin:12px 8px 8px 10px;border-radius:50% 50%;border:2px solid #dc8f03;}.deng-b{width:45px;height:90px;background:#d8000f;background:rgba(216,0,15,0.1);margin:-4px 8px 8px 26px;border-radius:50% 50%;border:2px solid #dc8f03;}.xian{position:absolute;top:-20px;left:60px;width:2px;height:20px;background:#dc8f03;}.shui-a{position:relative;width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 4s infinite ease-in-out;-webkit-transform-origin:50% -45px;background:#ffa500;border-radius:0 0 5px 5px;}.shui-b{position:absolute;top:14px;left:-2px;width:10px;height:10px;background:#dc8f03;border-radius:50%;}.shui-c{position:absolute;top:18px;left:-2px;width:10px;height:35px;background:#ffa500;border-radius:0 0 0 5px;}.deng:before{position:absolute;top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;z-index:999;border-radius:5px 5px 0 0;border:solid 1px #dc8f03;background:#ffa500;background:linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);}.deng:after{position:absolute;bottom:-7px;left:10px;height:12px;width:60px;content:" ";display:block;margin-left:20px;border-radius:0 0 5px 5px;border:solid 1px #dc8f03;background:#ffa500;background:linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);}.deng-t{font-family:华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;font-size:3.2rem;color:#dc8f03;font-weight:bold;line-height:85px;text-align:center;}.night .deng-t,.night .deng-box,.night .deng-box1{background:transparent !important;}@-moz-keyframes swing{0%{-moz-transform:rotate(-10deg)}50%{-moz-transform:rotate(10deg)}100%{-moz-transform:rotate(-10deg)}}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg)}100%{-webkit-transform:rotate(-10deg)}}@media screen and (max-width:768px){.deng-box{position:fixed;top:23px;right:-50px;z-index:999;}.deng-box1{position:fixed;top:23px;z-index:999;right:-20px;}}</style><br>
<!-- 灯笼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>
 
<!-- 灯笼2 -->
<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>

 灯笼·样式二

四个灯笼显示在顶部两侧，仅在PC端显示

<style>
    .ct2 .mn {width:770px;}.ct2 .sd {width:218px;}
</style>
<div id="wp" class="wp">
    <div class="xnkl">
        <div class="deng-box2">
            <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-box3">
            <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>
        <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>
    <style type="text/css">
        @media screen and (max-width: 768px) {.xnkl{display:none; }}.deng-box
        { position: fixed; top: -40px; right: 150px; z-index: 9999; pointer-events:
        none;}.deng-box1 { position: fixed; top: -30px; right: 10px; z-index: 9999;
        pointer-events: none}.deng-box2 { position: fixed; top: -40px; left: 150px;
        z-index: 9999; pointer-events: none}.deng-box3 { position: fixed; top:
        -30px; left: 10px; z-index: 9999; pointer-events: none}.deng-box1 .deng,.deng-box3
        .deng { position: relative; width: 120px; height: 90px; margin: 50px; background:
        #d8000f; background: rgba(216,0,15,.8); border-radius: 50% 50%; -webkit-transform-origin:
        50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow:
        -5px 5px 30px 4px #fc903d}.deng { position: relative; width: 120px; height:
        90px; margin: 50px; background: #d8000f; background: rgba(216,0,15,.8);
        border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation:
        swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px #fa6c00}.deng-a
        { width: 100px; height: 90px; background: #d8000f; background: rgba(216,0,15,.1);
        margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03}.deng-b
        { width: 45px; height: 90px; background: #d8000f; background: rgba(216,0,15,.1);
        margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03}.xian
        { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px;
        background: #dc8f03}.shui-a { position: relative; width: 5px; height: 20px;
        margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out;
        -webkit-transform-origin: 50% -45px; background: orange; border-radius:
        0 0 5px 5px}.shui-b { position: absolute; top: 14px; left: -2px; width:
        10px; height: 10px; background: #dc8f03; border-radius: 50%}.shui-c { position:
        absolute; top: 18px; left: -2px; width: 10px; height: 35px; background:
        orange; border-radius: 0 0 0 5px}.deng:before { position: absolute; top:
        -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block;
        z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background:
        orange; background: linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.deng:after
        { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px;
        content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px
        5px; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to
        right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.deng-t { font-family: 黑体,Arial,Lucida
        Grande,Tahoma,sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight:
        700; line-height: 85px; text-align: center}.night .deng-box,.night .deng-box1,.night
        .deng-t { background: 0 0!important}@-moz-keyframes swing { 0% { -moz-transform:
        rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform:
        rotate(-10deg) }}@-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg)
        } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg)
        }}
    </style>

操作方法

将代码添加至网站自定义html即可

学习更多知识：前往青鹿云

青鹿云
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
欢度国庆大红灯笼特效js代码给网站加特效增加节日气氛，增加回头客户率
3c源码的博客
09-28 1418
第一种:适合手机网页(2个灯笼） 把这段代码加入网站首页添加至代码中任意位置。 <script src="https://www.3cym.com/denglong/shoujidenglong.js"></script> 第二种:适合电脑版(4个灯笼） 把这段代码加入网站首页添加至代码中任意位置。 <script src="https://www.3cym.com/denglong/pcdenglong.js"></script> 也可以复制一下ht
网站挂上欢度春节灯笼的代码
sinat_21098507的博客
02-09 1658
这是在我的站的测试 效果。：http://www.mym55.com 代码已经做了压缩，放在网站头部<body>下面就好了，至于灯笼的文字自己修改下 <style type="text/css"> .ct2 .mn {width:770px;} .ct2 .sd {width:218px;} @media screen and (max-width:768px) {.xnkl {display:none;} } .deng-box {position:fixed;top:-..
新年祝福，贺卡网页代码
10-16
新年祝福，贺卡网页代码
用HTML做2个新年代码
we123aaa4567的博客
01-14 3035
新年快到了，先祝大家新年快乐！有两个代码，任你挑选。
代码分享|为网站加新年灯笼的代码
yvjian1989的博客
12-20 886
单页引导页：找到 在前面粘贴代码就好了，如果觉得灯笼🏮太大了，也可以自己调整一下样式。博客:后台设置自定义输出head 头部的HTML代码 粘贴代码。放一段代码用来装饰你的Blog或者个人站点。
CSS3新年灯笼动画代码
05-01
新年灯笼动画通常是为了庆祝新年的到来，营造出喜庆和热闹的氛围。以下是一些关键的CSS3知识点，用于构建这样的动画： 1. **选择器**：CSS3引入了新的选择器，如类选择器（`.class`）、ID选择器（`#id`）、属性选择...
网站背景换成兔年喜庆大气背景图片三个打包
09-25
网站背景的更换是提升网页视觉效果和节日氛围的重要手段，特别是在兔年来临之际，许多网站会选择采用喜庆、大气的背景图片来庆祝新年。本文将详细介绍如何将网站背景换成兔年主题的背景图片，并提供一个包含三个精美...
新年灯笼PSD
12-18
新年灯笼PSD是一款专为庆祝新年设计的网页模板，它采用了Photoshop PSD（Photoshop Document）格式，这种格式允许设计师以图层的形式编辑设计元素，提供了极高的灵活性和精细度。在网页设计中，PSD文件是初始设计...
提灯笼的小猫flash动画
07-24
"提灯笼的小猫flash动画"是一个以新年为主题的招财猫卡通动画素材，适合用于庆祝活动、网站装饰或者相关的新年贺卡设计。这个动画体现了中国传统节日的文化元素，如喜庆的氛围和寓意吉祥的招财猫形象。 1. **Flash...
简洁大气喜庆新年风春节主题PPT模板.pptx
07-10
用户可以通过粘贴视频的嵌入代码或搜索关键词来添加相关的视频内容。 6. **版式调整**：对于图片的处理，可以提供多种布局选项，让用户根据需要调整图片与文本的结合方式。处理表格时，方便用户添加行或列，以便...
html欢度新春灯笼代码.txt
02-07
网站灯笼代码，欢度新春灯笼代码，春节灯笼代码，html灯笼代码
春节祝福源码
01-16
今天是 2014年1月16日 离2014马年春节有15天 QQ前线在此祝福大家2014新年快乐，马到功成 QQ前线官方网站：http://www.yijingying.com/ 前提告诉大家，一定要把下面看完哦，否则今年一定倒大霉 (*^__^*) 嘻嘻……
灯笼广告代码（精简）
12-17
简单易懂的灯笼广告代码，效果不错，希望对你有帮助
2018春节喜庆APP网站前端模板FHS.zip
08-27
2018春节喜庆APP网站前端模板FHS.zip漂亮的前端后台静态代码，适合选用二次开发，bootstrap结构，自适应手机电脑，非常棒的代码。
用HTML加css做成的新年特效,使用css3和html给网站添加上春节灯笼特效的源码分享...
weixin_28752415的博客
06-02 780
马上就过年了，网站也可以装饰一下，本文就教大家如何使用css和html代码给你网站添加上一对新年灯笼。就像奶爸建站笔记这样。这个灯笼特效可以加到任何网站上面，不管你是不是用的WordPress搭建的网站都可以。具体的方法如下：1、复制下面的代码添加到网站的页脚文件。节春2、复制下面的css代码添加到你网站上面。.deng-box {position: fixed;top: -40px;right:...
200行JS代码为你的网页挂上红灯笼
热门推荐
知心宝贝的博客
01-24 1万+
一、前言 除夕夜，在门前挂上灯笼有鸿（红）运当头的吉祥寓意，逢年过节挂的灯笼上，基本都是吉祥的图案和祝福的吉祥话。 而灯笼的正红色是朱砂的颜色，而朱砂是风水上讲去邪挡煞效力极强的宝物，所以自古逢年过节，就有在大门上挂红色灯笼的传统。 二、效果展示 局部效果 全局效果 三、代码讲解 1.确定位置 我们平常挂灯笼一般是挂在大门的两侧，所以我们把灯笼的位置确定在网页的左侧和右侧，平时讲究好事成双，所以网页两侧的灯笼要对称，距离适中。 右侧的灯笼位置： .spring_lant
html背景对联效果-恭喜新禧,web前端开发
weixin_30969157的博客
06-03 653
对联效果document.writeln("");document.writeln("");document.writeln(""); document.writeln("");var tips;var isIE6=false;document.write("");if(isIE6){var theTop = 10;}else{var theTop = 60;}var old = theTop;f...
【HTML】使用css3和html给网站添加上春节灯笼特效
点滴记忆
02-04 904
马上就过年了，网站也可以装饰一下，本文就教大家如何使用css和html代码给你网站添加上一对新年灯笼。 这个灯笼特效可以加到任何网站上面，不管你是不是用的WordPress搭建的网站都可以。 具体的方法如下： 1、复制下面的代码添加到网站的页脚文件。 <!-- 灯笼1 --> <div class="deng-box"> <div class="deng...
使用 css3 和 html 给网站添加上春节灯笼特效
phubing
01-23 2143
先上效果图 1、复制下面的代码添加到网站的页脚文件。 <!-- 灯笼1 --> <div class="deng-box"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"&...
写一个有灯笼的html代码
最新发布
05-19
好的，这是一个简单的带灯笼的HTML代码： ```html <!DOCTYPE html> <html> <head> <title>带灯笼的HTML代码</title> </head> <body> <div> <img src="https://cdn.pixabay.com/photo/2017/09/30/08/27/lampion-2804359_960_720.png" alt="灯笼"> </div> </body> </html> ``` 希望这个能对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值