新年到,给你的网站加一个带对联的灯笼

南蛮子懋和2024年02月06日技术5614
文章摘要
DaoGPT
此内容根据文章AI生成,并经过人工审核,仅用于文章内容的解释与总结
投诉

image.png新年了,给自己的站点添个带对联的小灯笼吧。代码如下:

!function (t) {
    "function" == typeof define && define.amd ? define(t) : t();
}(function () {
    "use strict";

    // 判断是否是手机端
    function isMobile() {
        return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera mini/i.test(navigator.userAgent) || WINdow.innerWidth <= 460;
    }

    // 如果是手机端,直接退出,不执行代码
    if (isMobile()) {
        return;
    }

    !function (t, e) {
        void 0 === e && (e = {});
        var n = e.insertAt;
        if (t && "undefined" != typeof document) {
            var r = document.head || document.GETElementsByTagName("head")[0],
                a = document.createElement("style");
            a.type = "text/css", "top" === n && r.firstChild ? r.insertBefore(a, r.firstChild) : r.appendChild(a), a.styleSheet ? a.styleSheet.cssText = t : a.appendChild(document.createTextNode(t));
        }
    }('@charset "UTF-8";  .duilian{position:absolute;z-index:999999999;width:100%;height:auto;}.lantern__warpper{position:fixed;top:12px;left:40px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:999999999}.lantern__warpper.lantern__secondary{left:calc(99.99% - 130px)}.lantern__warpper.lantern__secondary .lantern__box{-webkit-animation-duration:3s;animation-duration:3s}.lantern__box{position:relative;display:inline-block;width:90px;height:70px;background:rgba(216,0,15,.8);border-radius:50% 50%;animation:lantern-sWINg 3s ease-in-out infinite alternate-reverse, lantern-flutter 4s ease-in-out infinite; -webkit-transform-origin:50% -70px;-ms-transform-origin:50% -70px;transform-origin:50% -70px;-webkit-box-shadow:-5px 5px 50px 4px #fa6c00;box-shadow:-5px 5px 50px 4px #fa6c00}.lantern__box:after,.lantern__box:before{content:"";position:absolute;height:8px;width:45px;left:50%;border:1px solid #dc8f03;background:-webkit-gradient(linear,left top,right top,from(#dc8f03),color-stop(orange),color-stop(#dc8f03),color-stop(orange),to(#dc8f03));background:-o-linear-gradient(left,#dc8f03,orange,#dc8f03,orange,#dc8f03);background:linear-gradient(90deg,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.lantern__box:before{top:0;border-radius:5px 5px 0 0;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.lantern__box:after{bottom:0;border-radius:0 0 5px 5px;-webkit-transform:translate(-50%,50%);-ms-transform:translate(-50%,50%);transform:translate(-50%,50%)}.lantern__line{position:absolute;width:2px;height:12px;top:0;left:50%;-webkit-transform:translate(-50%,-99.99%);-ms-transform:translate(-50%,-99.99%);transform:translate(-50%,-99.99%);background:#dc8f03}.lantern__circle{width:80%;-webkit-box-sizing:border-box;box-sizing:border-box}.lantern__circle,.lantern__circle .lantern__ellipse{height:99.99%;margin:0 auto;border-radius:50%;border:2px solid #dc8f03}.lantern__circle .lantern__ellipse{width:50%}.lantern__circle .lantern__text{font-family:华文行楷,Microsoft YaHei,sans-serif;color:#dc8f03;font-size: xx-large;line-height:66px;text-align:center}.lantern__tail{position:relative;width:4px;height:12px;margin:0 auto;animation:lantern-swing 4s ease-in-out infinite alternate-reverse;background:orange;border-radius:0 0 5px 5px}.lantern__tail .lantern__junction{position:absolute;top:0;left:50%;width:8px;height:8px;-webkit-transform:translate(-50%,8.4px);-ms-transform:translate(-50%,8.4px);transform:translate(-50%,8.4px);background:#e69603;border-radius:50%}.lantern__tAIl .lantern__rect{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%,10.8px);-ms-transform:translate(-50%,10.8px);transform:translate(-50%,10.8px);width:8px;height:24px;background:orange;border-radius:5px 5px 0 5px}@-webkit-keyframes lantern-swing{0%{-webkit-transform:rotate(-8deg);transform:rotate(-8deg)}to{-webkit-transform:rotate(8deg);transform:rotate(8deg)}}@keyframes lantern-swing{0%{-webkit-transform:rotate(-8deg);transform:rotate(-8deg)}to{-webkit-transform:rotate(8deg);transform:rotate(8deg)}}@keyframes lantern-flutter{0%{transform:translateX(0) rotate(0)}25%{transform:translateX(-5px) rotate(-3deg)}50%{transform:translateX(5px) rotate(3deg)}75%{transform:translateX(-3px) rotate(-2deg)}100%{transform:translateX(0) rotate(0)}}');

    document.addEventListener("DOMContentLoaded", function () {
        var t = document.createElement("div");
        t.className = "j-china-lantern";
        t.innerhtml = `
            <div class="lantern__warpper">
                <div class="lantern__box">
                    <div class="lantern__line"></div>
                    <div class="lantern__circle">
                        <div class="lantern__ellipse">
                            <div class="lantern__text">新</div>
                        </div>
                    </div>
                    <div class="lantern__tAIl">
                        <div class="lantern__rect"></div>
                        <div class="lantern__junction"></div>
                    </div>
                    <img class="duilian" src="https://cdn.wulintang.net/taiji/img/2025zuo.png" />
                </div>
            </div>
            <div class="lantern__warpper lantern__secondary">
                <div class="lantern__box">
                    <div class="lantern__line"></div>
                    <div class="lantern__circle">
                        <div class="lantern__ellipse">
                            <div class="lantern__text">年</div>
                        </div>
                    </div>
                    <div class="lantern__tail">
                        <div class="lantern__rect"></div>
                        <div class="lantern__junction"></div>
                    </div>
                    <img class="duilian" src="https://cdn.wulintang.net/taiji/img/2025you.png" />
                </div>
            </div>
        `;
        document.body.appendChild(t);
    });
});

上述代码已经默认手机端不显示对联


二〇二五年元月二十六日修改对联为乙巳年新年对联。

扫描二维码推送至手机访问。

版权声明:本文由 南蛮子懋和 发布,如需转载请遵循《声明》注明出处。

本文链接:https://www.dao.js.cn/new/2024020611221.shtml

“新年到,给你的网站加一个带对联的灯笼” 的相关文章

uptimerobot 的 ipv4 与 ipv6 列表

uptimerobot 的 ipv4 与 ipv6 列表

216.144.250.150 69.162.124.226 69.162.124.227 69.162.124.228 69.162.124.229 69.162.124.230 69....

MySQL中替换、更新字段及其它

MySQL中替换、更新字段及其它

有时候需要在表中更换一些字符串为NULL,可以使用下面的句子:update tablename set fieldname = "texts...

山西恶意CC的IP波段

山西恶意CC的IP波段

连日来,在较多的站长群里人人喊“被打”,纵使使用了CDN服务也没用,瞬间流量飙升。往往就单个较大的文件,如图片、CSS、JS文件等,急剧刷量,导致流量飙升,一些购买了付费服务的站长,甚至欠费若干。小道...

七牛云设置默认首页

七牛云设置默认首页

首先使用qshell登录qshell account ak sk email选择需要上传的index.htmlqshell fput 空间名...

评论列表

南蛮子懋和
南蛮子懋和 QQBrowser 13.5.6267.400  Windows 10 x64
2025年01月26日

需要的人可以直接把代码拿过去用,不过,图片自己下载下来,我CDN的量不大,也就过年时候用几天的。

领券网
领券网 Google Chrome 86.0.4240.198  Windows 10 x64
2024年02月07日

写的很详细具体,学习到了,多谢博主的分享!⌇●﹏●⌇

领券网
领券网 Google Chrome 86.0.4240.198  Windows 10 x64
2024年02月07日

已收藏!!!多谢大佬分享这么好的资源教程!!!已关注博主网站!!!会长期访问!!!

二百六十三  QQBrowser 12.2.5541.400 Windows 10 x64 回复:
搞得跟个广告似的。
2024年02月08日

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。

请如实填写常用的真实邮箱,方便后续的回复邮件通知。