临安市建设局网站,html5网站多少钱,手机建筑设计app,信阳优化公司给网站上加俩红灯笼#xff0c;增添一下气氛。 一、灯笼效果和代码 这个版本的是从网上教程里找到的#xff0c;效果如下#xff1a; 完整denglong.js代码#xff1a; function createDengContainer() {const container document.createElement(div);container.classNa…给网站上加俩红灯笼增添一下气氛。一、灯笼效果和代码这个版本的是从网上教程里找到的效果如下完整denglong.js代码function createDengContainer() { const container document.createElement(div); container.className deng-container; // 从当前脚本的 URL 获取参数 const scriptSrc document.currentScript.src; const urlParams new URLSearchParams(scriptSrc.split(?)[1]); // 获取 ? const customText urlParams.get(text); // 获取参数名为text的值 // 将获取的文本分割为字符数组如果没有提供文本则使用默认的“新年快乐” const texts customText ? customText.split() : [新, 年, 快, 乐]; texts.forEach((text, index) { const box document.createElement(div); box.className deng-box deng-box${index 1}; const deng document.createElement(div); deng.className deng; const xian document.createElement(div); xian.className xian; const dengA document.createElement(div); dengA.className deng-a; const dengB document.createElement(div); dengB.className deng-b; const dengT document.createElement(div); dengT.className deng-t; dengT.textContent text; dengB.appendChild(dengT); dengA.appendChild(dengB); deng.appendChild(xian); deng.appendChild(dengA); const shuiA document.createElement(div); shuiA.className shui shui-a; const shuiC document.createElement(div); shuiC.className shui-c; const shuiB document.createElement(div); shuiB.className shui-b; shuiA.appendChild(shuiC); shuiA.appendChild(shuiB); deng.appendChild(shuiA); box.appendChild(deng); container.appendChild(box); }); document.body.appendChild(container); } // 添加CSS样式 function addStyles() { const style document.createElement(style); style.type text/css; style.textContent .deng-container { position: relative; overflow: hidden; top: 10px; opacity: 0.9; z-index: 9999; pointer-events: none; } .deng-box { position: fixed; right: 10px; top: 12px; } .deng-box1 { position: fixed; top: 15px; left: 20px; } .deng-box2 { position: fixed; top: 12px; left: 130px; } .deng-box3 { position: fixed; top: 10px; right: 120px; } .deng { position: relative; width: 120px; height: 90px; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px #fa6c00; } .deng-a { width: 100px; height: 90px; background: rgba(216, 0, 15, .1); border-radius: 50%; border: 2px solid #dc8f03; margin-left: 7px; display: flex; justify-content: center; } .deng-b { width: 65px; height: 83px; background: rgba(216, 0, 15, .1); border-radius: 60%; 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; animation: swing 4s infinite ease-in-out; 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, .deng:after { content: ; display: block; position: absolute; border-radius: 5px; border: solid 1px #dc8f03; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03); } .deng:before { top: -7px; left: 29px; height: 12px; width: 60px; z-index: 999; } .deng:after { bottom: -7px; left: 10px; height: 12px; width: 60px; margin-left: 20px; } .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; } media (max-width: 768px) { .deng-t { font-size: 2.5rem; } .deng-box1,.deng-box2{ transform: scale(0.5); transform-origin: left top ; } .deng-box3,.deng-box4 { transform: scale(0.5); transform-origin: right top ; } .deng-box1 { position: fixed; top: 8px; left: 5px; } .deng-box2 { position: fixed; top: 8px; left: 60px; } .deng-box3 { position: fixed; top: 8px; right: 60px; } .deng-box4 { position: fixed; top: 8px; right: 5px; } } keyframes swing { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } ; document.head.appendChild(style); } // 引入时调用 function init() { addStyles(); createDengContainer(); } // 调用初始化函数 init();二、引用方式1、新建一个denglong.js文件放在你的网站的资源目录下。2、在网站首页的/body前引用比如script srchttps://www.example.com/denglong.js?text春节快乐 /script3、handsome主题直接放在自定义尾部即可4、text春节快乐text后面的四个字即显示在四个灯笼里面的字默认是“新年快乐”我的个人博客主页欢迎访问我的CSDN主页欢迎访问我的GitHub主页欢迎访问我的知乎主页欢迎访问