给网站或者博客添加新年灯笼代码

0782

马上快过年了，放一段代码用来装饰你的Blog或者个人站点，这样才有喜庆劲儿呢

自定义输出head 头部的HTML代码

粘贴代码单页引导页：找到<head> 在前面粘贴代码就好了，如果觉得灯笼?太大了，也可以自己调整一下样式

两种都经过测试，都ok

第一种

<div id="wp" class="wp" cemhmxhtlyg3zccwq8smoc="">
    <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>
    </div>
图片[1]-给网站或者博客添加新年灯笼代码-阿宅学院

第二种

<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>
<style type="text/css">
    .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>
图片[2]-给网站或者博客添加新年灯笼代码-阿宅学院
    © 版权声明
    网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
    分享是一种美德，当你分享时请你附带上本文链接。
    THE END
    资源分享
    # 代码# 灯笼
    支持博主，更新加速
    点赞2 分享
    生草博客站长的头像-阿宅学院
    子比美化之悬浮按钮繁简体切换方式-阿宅学院
    子比美化之悬浮按钮繁简体切换方式
    子比美化之悬浮按钮繁简体切换方式
    2023年5月15日 194
    分享一个为网站所有用户批量设置为VIP会员的代码-阿宅学院
    分享一个为网站所有用户批量设置为VIP会员的代码
    分享一个为网站所有用户批量设置为VIP会员的代码
    2023年5月28日 172
    WordPress中实现每篇文章只允许用户评论一次-阿宅学院
    WordPress中实现每篇文章只允许用户评论一次
    WordPress中实现每篇文章只允许用户评论一次
    2023年3月22日 160
    子比主题配置评论显示所在IP地区和使用设备-阿宅学院
    子比主题配置评论显示所在IP地区和使用设备
    子比主题配置评论显示所在IP地区和使用设备
    2022年11月16日 151
    子比美化之h6标题美化css彩虹文字特效-阿宅学院
    子比美化之h6标题美化css彩虹文字特效
    子比美化之h6标题美化css彩虹文字特效
    2023年5月15日 150
    国内服务器安装chatgpt-turbo-3.5镜像(Docker)-阿宅学院
    国内服务器安装chatgpt-turbo-3.5镜像(Docker)
    国内服务器安装chatgpt-turbo-3.5镜像(Docker)
    2024年1月29日 149
    勋章统计

    随机推荐
    自签证书SSL证书管理器源码-阿宅学院
    自签证书SSL证书管理器源码
    自签证书SSL证书管理器源码
    2022年10月16日 98
    网站添加小时钟小工具页面自定义html-阿宅学院
    网站添加小时钟小工具页面自定义html
    网站添加小时钟小工具页面自定义html
    2022年10月19日 75
    wordpress主题CorePress-阿宅学院
    wordpress主题CorePress
    wordpress主题CorePress
    2021年8月24日 120
    总裁导航网站2.4.5源码-阿宅学院
    总裁导航网站2.4.5源码
    总裁导航网站2.4.5源码
    2021年9月14日 26
    Windows/Office版本激活工具-阿宅学院
    Windows/Office版本激活工具
    Windows/Office版本激活工具
    2022年4月11日 62
    评论一下 抢沙发

    请登录后发表评论

      请登录后查看评论内容