找到
46
篇与
源码
相关的结果
- 第 3 页
-
CSS 加载器之特效源码 效果预览 IMG_5041.gif图片 源代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <style> body{background-color: #212121;}.loader{margin-top:300px;display:flex;justify-content:center;align-items:center;position:relative;cursor:not-allowed;scale:0.7;}.central{display:flex;justify-content:center;align-items:center;position:relative;width:10em;height:10em;border-radius:50%;box-shadow:0.5em 1em 1em blueviolet,-0.5em 0.5em 1em blue,0.5em -0.5em 1em purple,-0.5em -0.5em 1em cyan;}.external-shadow{width:10em;height:10em;border-radius:50%;display:flex;justify-content:center;align-items:center;position:relative;box-shadow:0.5em 0.5em 3em blueviolet,-0.5em 0.5em 3em blue,0.5em -0.5em 3em purple,-0.5em -0.5em 3em cyan;z-index:999;animation:rotate 3s linear infinite;background-color:#212121;}.intern{position:absolute;color:white;z-index:9999;}.intern::before{content:"100%";animation:percent 2s ease-in-out infinite;}@keyframes rotate{0%{transform:rotate(0deg);}50%{transform:rotate(180deg);}100%{transform:rotate(360deg);}}@keyframes percent{0%{content:'0%';}25%{content:'25%';}33%{content:'33%';}42%{content:'42%';}51%{content:'51%';}67%{content:'67%';}74%{content:'74%';}75%{content:'75%';}86%{content:'86%';}95%{content:'95%';}98%{content:'98%';}99%{content:'99%';}} </style> <body> <div class="loader"> <div class="intern"> </div> <div class="external-shadow"> <div class="central"> </div> </div> </div> </body> <script> </script> </html>
-
火柴盒动画（可复制源代码） 效果展示 640.gif图片 源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>火柴盒动画</title> <style> @import url("https://fonts.googleapis.com/css?family=BenchNine:700&display=swap");:root{--color-outline:#302519;--color-background:#f1d6bc;--color-match:#b36b4a;--size-border:8px;--size-height:300px;--size-width:200px;--size-depth:100px}*{box-sizing:border-box;margin:0;padding:0;transition:all 0.3s ease}*:before,*:after{content:"";position:absolute}body{display:flex;justify-content:center;align-items:center;height:100vh;background:var(--color-background);font-family:"BenchNine",sans-serif}.container{width:500px;height:500px;position:relative;perspective:1200px;padding-left:80px;padding-top:180px}.box{width:var(--size-height);height:var(--size-width);position:absolute;transform-style:preserve-3d;transition:transform 0.5s;transform:rotate(-50deg) rotateX(30deg) translateZ(10px);cursor:pointer;transform-origin:center center}.box > div{position:absolute;text-align:center}.box .front,.box .back{width:var(--size-height);height:var(--size-width)}.box .front,.box .back{background:var(--color-background);border:var(--size-border) solid var(--color-outline)}.box .right,.box .left{width:var(--size-depth);height:var(--size-width)}.box .right,.box .left{left:var(--size-depth)}.box .top,.box .bottom{width:var(--size-height);height:var(--size-depth)}.box .top,.box .bottom{top:calc(var(--size-depth) / 2)}.box .right,.box .left,.box .top,.box .bottom{background:var(--color-background);border:var(--size-border) solid var(--color-outline);border-bottom-width:calc(var(--size-border) * 2)}.box .front{transform:translateZ(50px)}.box .back{transform:rotateX(-180deg) translateZ(50px)}.box .right{transform:rotateY(90deg) translateZ(150px)}.box .left{transform:rotateY(-90deg) translateZ(150px);background:var(--color-outline)}.box .top{transform:rotateX(90deg) translateZ(100px)}.box .bottom{transform:rotateX(-90deg) translateZ(100px);overflow:hidden;display:flex;justify-content:center;align-items:center}.box.outside .bottom:before{background-image:radial-gradient(var(--color-outline) 20%,transparent 20%),radial-gradient(var(--color-outline) 20%,transparent 20%);background-position:0 0,8px 8px;background-size:16px 16px;width:calc(100% - 20px);height:calc(100% - 22px)}.box.outside .front{z-index:1000}.box.outside .front:before{left:0;top:0;width:55px;height:55px;background:var(--color-outline);-webkit-mask-image:radial-gradient( circle 10px at 100% 100%,transparent 0,transparent 55px,var(--color-outline) 0px );mask-image:radial-gradient( circle 10px at 100% 100%,transparent 0,transparent 55px,var(--color-outline) 0px )}.box.outside .front:after{content:"Light the \A fire with \A matches";white-space:pre;font-size:16px;line-height:20px;letter-spacing:0.5px;color:var(--color-outline);text-transform:uppercase;transform:rotate(90deg);transform-origin:center center;background:var(--color-background);width:70px;height:84px;border-radius:50%;display:flex;justify-content:center;align-items:center;left:calc(50% - 35px);top:calc(50% - 42px)}.box.outside .front .line:nth-child(1),.box.outside .front .line:nth-child(2){position:absolute;display:flex;justify-content:center;align-items:center}.box.outside .front .line:nth-child(1){width:154px;height:120px;left:calc(50% - 77px);top:calc(50% - 60px)}.box.outside .front .line:nth-child(1):before{width:4px;height:140px;background:linear-gradient( to top,var(--color-outline),var(--color-outline) 10px,transparent 10px,transparent 16px,var(--color-outline) 16px,var(--color-outline) 124px,transparent 124px,transparent 130px,var(--color-outline) 130px,var(--color-outline) 140px )}.box.outside .front .line:nth-child(1):after{width:4px;height:174px;background-color:var(--color-outline);border-radius:4px;background:linear-gradient( to right,var(--color-outline),var(--color-outline) 10px,transparent 10px,transparent 16px,var(--color-outline) 16px,var(--color-outline) 158px,transparent 158px,transparent 164px,var(--color-outline) 164px,var(--color-outline) 174px )}.box.outside .front .line:nth-child(2){width:116px;height:106px;left:calc(50% - 58px);top:calc(50% - 53px);border-radius:50%}.box.outside .front .line:nth-child(2):before,.box.outside .front .line:nth-child(2):after{width:4px;height:140px;border-radius:4px;background:linear-gradient( to top,var(--color-outline),var(--color-outline) 14px,transparent 14px,transparent 22px,var(--color-outline) 22px,var(--color-outline) 118px,transparent 118px,transparent 126px,var(--color-outline) 126px,var(--color-outline) 140px )}.box.outside .front .line:nth-child(2):before{transform:rotate(-45deg)}.box.outside .front .line:nth-child(2):after{transform:rotate(45deg)}.box.outside .front .line:nth-child(3),.box.outside .front .line:nth-child(4){position:absolute;width:116px;height:106px;left:calc(50% - 58px);top:calc(50% - 53px);border-radius:50%;display:flex;justify-content:center;align-items:center}.box.outside .front .line:nth-child(3):before,.box.outside .front .line:nth-child(3):after,.box.outside .front .line:nth-child(4):before,.box.outside .front .line:nth-child(4):after{width:4px;border-radius:4px;background-color:var(--color-outline)}.box.outside .front .line:nth-child(3):before,.box.outside .front .line:nth-child(3):after{height:150px}.box.outside .front .line:nth-child(3):before{transform:rotate(67.5deg)}.box.outside .front .line:nth-child(3):after{transform:rotate(-67.5deg)}.box.outside .front .line:nth-child(4):before,.box.outside .front .line:nth-child(4):after{height:126px}.box.outside .front .line:nth-child(4):before{transform:rotate(22.5deg)}.box.outside .front .line:nth-child(4):after{transform:rotate(-22.5deg)}.box.inside .bottom:before,.box.inside .front:after,.box.inside .front:before{display:none}.box.inside .right{background-color:var(--color-outline)}.box.inside .back,.box.inside .front{width:var(--size-height);background-color:var(--color-outline);height:calc(var(--size-width) - calc(var(--size-border) * 1.5));margin-top:var(--size-border)}.box.inside .right,.box.inside .left{width:var(--size-depth);height:calc(var(--size-width) - calc(var(--size-border) * 1.5));background-color:var(--color-outline);left:var(--size-depth);top:var(--size-border)}.box.inside .left{opacity:0}.box.inside .top,.box.inside .bottom{width:var(--size-height);height:var(--size-depth)}.box.inside .bottom{top:calc(calc(var(--size-depth) / 2) + calc(var(--size-border) * -0.5));border-top-width:calc(var(--size-border) * 2)}.box.inside .top{background-color:var(--color-outline);top:calc(calc(var(--size-depth) / 2) + calc(var(--size-border) / 1))}.box.inside .front{background-color:transparent;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-end;padding-right:30px}.box.inside .front .match{height:16px;width:200px;border:calc(var(--size-border) / 2) solid var(--color-outline);background-color:var(--color-background);position:relative}.box.inside .front .match:before{width:12px;height:100%;background-color:var(--color-match);right:0}.box.inside .front .match:after{height:16px;width:24px;background-color:var(--color-background);border:calc(var(--size-border) / 2) solid var(--color-outline);border-radius:50% 50% 50% 50% / 40% 50% 50% 40%;right:calc(-24px - calc(var(--size-border) / 2));top:calc((50% - 8px) - calc(var(--size-border) / 2));background-image:radial-gradient(var(--color-outline) 20%,transparent 20%),radial-gradient(var(--color-outline) 20%,transparent 20%);background-position:0 0,4px 4px;background-size:8px 8px}.box.inside{transform:translateX(55px) translateZ(-6px)}.box.inside .back{position:relative}.box.inside .back span{color:var(--color-outline);z-index:1000;position:absolute;top:0;left:calc(var(--size-border) * -6);margin-top:calc(var(--size-border) * -6);font-size:calc(var(--size-border) * 2);transform-origin:bottom center;transform:scaleY(-1);text-transform:uppercase;transition:opacity 0.2s linear 0.2s}.box:hover .box.inside .back span{opacity:0;transition:opacity 0.1s linear}.box:hover .box.inside{transform:translate(100px)}.box:hover{transform:rotate(-20deg) rotateX(35deg) rotateZ(-25deg)}.box:hover .box.inside .front{transform:translateZ(50px);transition:transform 0.2s ease}.box.inside .front{transform:translateZ(35px);border:none;transition:all 0.2s ease;transition-delay:0.3s}.box.inside .front .match{transition:all 0.2s ease;transition-delay:0.2s}.box:hover .box.inside .front .match{transition:all 0.3s ease-in}.box:hover .box.inside .front .match:nth-child(3){transform:translateX(20px)}.box:hover .box.inside .front .match:nth-child(4){transform:translateX(40px)}.box:hover .box.inside .front .match:nth-child(6){transform:translateX(70px)} </style> </head> <body> <div class="container"> <div class="box outside"> <div class="front"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="left"></div> <div class="top"></div> <div class="bottom"></div> <div class="box inside"> <div class="front"> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> </div> <div class="back"><span>Hover Me~</span></div> <div class="right"></div> <div class="left"></div> <div class="top"></div> <div class="bottom"></div> </div> </div> </div> </body> </html>素材来源于网络，如侵删！
-
一个例子带着小白走进代码的世界——网页设计篇 在编程的世界里，每一行代码都如同构建数字世界的砖石，它们承载着逻辑、算法与创意，共同编织出软件与应用的宏伟蓝图。当你提出“帮我写段代码”的请求时，这不仅仅是一个简单的技术需求，更是一次深入探索编程艺术、解决实际问题或创造新事物的旅程。下面，我将以构建一个简单网页的JavaScript代码片段为例，带你走进编程的奇妙世界。 场景设定 假设我们需要创建一个简单的网页，该网页包含一个按钮，当用户点击这个按钮时，页面会显示当前的时间。这样的功能在日常生活中非常常见，比如显示新闻发布时间、用户登录时间等。接下来，我们将分步骤实现这一功能。 HTML结构 首先，我们需要定义网页的基本结构，即HTML部分。在这个例子中，我们将添加一个按钮(<button>)和一个用于显示时间的元素(<p>)。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示时间</title> </head> <body> <button id="showTimeBtn">显示当前时间</button> <p id="timeDisplay">点击按钮查看时间</p> <!-- 引入JavaScript代码 --> <script src="script.js"></script> </body> </html>注意，<script src="script.js"></script>这一行告诉浏览器，JavaScript代码将存储在外部文件script.js中，这样做有助于保持HTML结构的清晰和JavaScript代码的可维护性。 JavaScript实现 接下来，我们在script.js文件中编写JavaScript代码，以实现点击按钮显示当前时间的功能。 // 获取按钮和时间显示元素的引用 const showTimeBtn = document.getElementById('showTimeBtn'); const timeDisplay = document.getElementById('timeDisplay'); // 为按钮添加点击事件监听器 showTimeBtn.addEventListener('click', function() { // 获取当前时间 const now = new Date(); // 格式化时间字符串 const formattedTime = now.toLocaleTimeString(); // 更新时间显示元素的内容 timeDisplay.textContent = formattedTime; });这段代码首先通过document.getElementById方法获取了页面上按钮和时间显示元素的引用。然后，使用addEventListener方法为按钮添加了一个点击事件监听器。当按钮被点击时，会执行一个匿名函数，该函数首先创建一个Date对象来获取当前时间，然后使用toLocaleTimeString方法将时间格式化为字符串（注意，这个时间格式会根据用户的地区设置有所不同），最后将这个格式化后的时间字符串设置为时间显示元素的文本内容。 深入理解 虽然这段代码看起来很简单，但它涵盖了JavaScript编程中的几个核心概念： DOM操作：通过document.getElementById等方法，我们可以访问和操作网页上的元素，这是JavaScript与HTML交互的基础。 事件监听：使用addEventListener方法可以为元素添加事件监听器，以便在特定事件发生时执行代码。这是实现交互式网页的关键。 日期和时间：Date对象提供了处理日期和时间的强大功能，包括获取当前时间、格式化时间等。 结论 通过上面的例子，我们不仅实现了一个简单的功能——点击按钮显示当前时间，还深入理解了JavaScript编程中的一些核心概念。编程不仅仅是编写代码，更是一种思考问题、解决问题的方式。
-
霓虹灯数字时钟（可复制源代码） nhd.gif图片 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>霓虹灯数字时钟</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <style> *{margin:0;padding:0;box-sizing:border}body{display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden;background:#2f363e}.clock{position:relative;width:280px;height:280px;display:flex;justify-content:center;align-items:center;scale:2;box-shadow:inset 5px 5px 25px rgba(0,0,0,0.25);border-radius:50%}#time{position:relative;width:250px;height:250px;display:flex;justify-content:center;align-items:center}#time .circle{position:absolute;display:flex;justify-content:center;align-items:center}#time .circle svg{position:relative;transform:rotate(270deg)}#time .circle:nth-child(1) svg{width:250px;height:250px}#time .circle:nth-child(2) svg{width:210px;height:210px}#time .circle:nth-child(3) svg{width:170px;height:170px}#time .circle svg circle{width:100%;height:100%;fill:transparent;stroke-width:5;stroke:var(--clr);transform:translate(5px,5px);opacity:0.25}#time .circle:nth-child(1) svg circle{stroke-dasharray:760;stroke-dashoffset:760}#time .circle:nth-child(2) svg circle{stroke-dasharray:630;stroke-dashoffset:630}#time .circle:nth-child(3) svg circle{stroke-dasharray:510;stroke-dashoffset:510}.dots{position:absolute;width:100%;height:100%;display:flex;align-items:flex-start;justify-content:center;z-index:10}.dots::before{content:"";position:absolute;top:-3px;width:15px;height:15px;background:var(--clr);border-radius:50%;box-shadow:0 0 20px var(--clr),0 0 40px var(--clr),0 0 60px var(--clr),0 0 80px var(--clr)}.niddles{position:absolute;width:200px;height:200px;border-radius:50%;display:flex;justify-content:center;align-items:flex-start;z-index:10}.niddles i{position:absolute;width:2px;background:var(--clr2);height:50%;opacity:0.75;border-radius:6px;transform-origin:bottom;transform:scaleY(0.5)}.niddles.niddles2{width:170px;height:170px;z-index:9}.niddles.niddles2 i{width:3px}.niddles.niddles3{width:140px;height:140px;z-index:8}.niddles.niddles3 i{width:4px}#time span{position:absolute;inset:55px;text-align:center;color:#999;font-family:Cambria,Cochin,Georgia,Times,"Times New Roman",serif;transform:rotate(calc(30deg * var(--i)))}#time span b{font-size:0.75em;font-weight:500;display:inline-block;transform:rotate(calc(-30deg * var(--i)))} </style> </head> <body> <div class="clock"> <div id="time"> <div class="circle" style="--clr:#ff2972"> <div class="dots sec_dot"></div> <svg> <circle cx="120" cy="120" r="120" id="ss"></circle> </svg> </div> <div class="circle" style="--clr:#fee800"> <div class="dots min_dot"></div> <svg> <circle cx="100" cy="100" r="100" id="mm"></circle> </svg> </div> <div class="circle" style="--clr:#04fc43"> <div class="dots hr_dot"></div> <svg> <circle cx="80" cy="80" r="80" id="hh"></circle> </svg> </div> <div class="niddles" style="--clr2:#ff2972;" id="sc"><i></i></div> <div class="niddles niddles2" style="--clr2:#fee800;" id="mn"><i></i></div> <div class="niddles niddles3" style="--clr2:#04fc43;" id="hr"><i></i></div> <span style="--i:1;"><b>1</b></span> <span style="--i:2;"><b>2</b></span> <span style="--i:3;"><b>3</b></span> <span style="--i:4;"><b>4</b></span> <span style="--i:5;"><b>5</b></span> <span style="--i:6;"><b>6</b></span> <span style="--i:7;"><b>7</b></span> <span style="--i:8;"><b>8</b></span> <span style="--i:9;"><b>9</b></span> <span style="--i:10;"><b>10</b></span> <span style="--i:11;"><b>11</b></span> <span style="--i:12;"><b>12</b></span> </div> </div> </body> <script> setInterval(()=>{let hh=document.getElementById("hh");let mm=document.getElementById("mm");let ss=document.getElementById("ss");let sec_dot=document.querySelector(".sec_dot");let min_dot=document.querySelector(".min_dot");let hr_dot=document.querySelector(".hr_dot");let hr=document.getElementById("hr");let mn=document.getElementById("mn");let sc=document.getElementById("sc");let h=new Date().getHours();let m=new Date().getMinutes();let s=new Date().getSeconds();hh.style.strokeDashoffset=510-(510*h)/12;mm.style.strokeDashoffset=630-(630*m)/60;ss.style.strokeDashoffset=760-(760*s)/60;sec_dot.style.transform=`rotateZ(${s*6}deg)`;min_dot.style.transform=`rotateZ(${m*6}deg)`;hr_dot.style.transform=`rotateZ(${h*30}deg)`;hr.style.transform=`rotateZ(${h*30}deg)`;mn.style.transform=`rotateZ(${m*6}deg)`;sc.style.transform=`rotateZ(${s*6}deg)`}); </script> </html>我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3c0nu17s7yck8
-
非常适合中小企业使用的开源ERP系统——JSH_ERP 今天，我想向大家推荐一个非常适合中小企业使用的开源ERP系统——JSH_ERP（原名：华夏ERP，英文名：jshERP）。这个项目不仅功能全面，还为开发者提供了极大的扩展和二次开发的空间。 2024-09-16T08:58:36.png图片 （首页） 项目概述 JSH_ERP 是一款基于 SpringBoot 和 Vue.js 的开源企业资源计划（ERP）系统，主要功能涵盖了进销存管理、财务管理以及生产管理。虽然目前功能集中在这些核心模块，但项目后续将推出更多完整的ERP功能。这个项目的开发初衷是为了帮助中小企业降低信息化成本，同时也为个人开发者提供了一个学习和二次开发的绝佳平台。 项目特点 1. 开源且灵活的架构 JSH_ERP 基于 SpringBoot 框架，结合 Mybatis 进行数据持久化，并且前端采用了流行的 Vue.js 框架和 Ant-Design-Vue 作为 UI 组件库。这种技术栈的选择不仅使得项目结构清晰、易于维护，同时也便于开发者根据需求进行二次开发。 2. 功能模块齐全 目前，JSH_ERP 主要提供以下功能模块： • 进销存管理：包括采购管理、销售管理、库存管理等，帮助企业高效管理供应链。 • 财务管理：实现了基本的财务报表功能，支持企业财务数据的录入和统计。 • 生产管理：覆盖了生产计划、生产进度等功能，适合制造业企业。 3. 前后端分离 JSH_ERP 采用前后端分离的架构，这使得前端开发者和后端开发者可以并行工作，提升开发效率。此外，前端使用的 Vue.js 框架与流行的单页应用（SPA）设计模式也使得用户体验更加流畅。 4. 易于二次开发 对于有二次开发需求的企业或个人开发者来说，JSH_ERP 提供了非常友好的扩展能力。你可以根据自身需求，灵活地修改或增加模块功能，而不必担心破坏原有系统的稳定性。 5. 全面的技术支持 项目不仅提供了详细的用户手册和接口文档，还分享了视频教程和部署指南，极大地方便了开发者快速上手和项目的实际部署。 功能截图 2024-09-16T09:01:47.png图片 （零售管理） 2024-09-16T09:01:50.png图片 （采购管理） 2024-09-16T09:01:56.png图片 （销售管理） 2024-09-16T09:02:04.png图片 （仓库管理） 2024-09-16T09:02:10.png图片 （财务管理） 2024-09-16T09:02:14.png图片 （报表查询） 2024-09-16T09:02:19.png图片 （商品管理） 2024-09-16T09:02:24.png图片 （基本资料） 2024-09-16T09:02:29.png图片 （系统管理） 总结 总的来说，JSH_ERP 是一个功能强大且灵活的开源ERP系统，特别适合中小企业。对于开发者来说，它提供了足够的二次开发空间，可以根据自己的需求进行定制。项目的技术栈也非常现代化，前后端分离的架构使得开发过程更加顺畅。如果你正在寻找一个易于上手的开源ERP系统，那么 JSH_ERP 绝对值得一试。希望这篇文章能够帮助大家更好地理解和使用这个项目，如果你对这个项目有兴趣，别忘了给它点个Star 哦！ 仓库地址：https://gitee.com/jishenghua/JSH_ERP 部署文档地址：https://www.kdocs.cn/l/skPA3WycWXxg
-
纸飞机（可复制源代码） 640 (1).gif图片 源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>纸飞机</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <link rel="stylesheet" href="./22-纸飞机.css"> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox='0 100 2100 1000'> <g fill='none' stroke='#674C99' stroke-width='15' stroke-linecap='round'> <line class="line" stroke-dashoffset="5208.54" stroke-dasharray="0 500 150 1150 200 604.27" x1="2723" y1="-83" x2="816.3" y2="1690.9" /> <line class="line" stroke-dashoffset="5372.94" stroke-dasharray="300 1000 200 1186.4" x1="2448.3" y1="-94.4" x2="408.9" y2="1654.3" /> <line class="line" stroke-dashoffset="5628.66" stroke-dasharray="200 1214.33 300 1100" x1="2187.4" y1="-87.6" x2="-38.7" y2="1634.3" /> <line class="line" stroke-dashoffset="5843.54" stroke-dasharray="10 490 100 1321.77 400 600" x1="1978.6" y1="-87.8" x2="-379.6" y2="1637.2" /> </g> <path class="shadow" fill='#674C99' d='M1528,665l-221.8,141c-2,1-2,5,0,7l120,60c2,1,4.6,0,5-1l101-201.2C1536.1,667,1531.7,663.1,1528,665z' /> <g class="plane-body"> <path fill='#56C2FF' d='M1131,516.3l297-38c3,0,5.6,4,2,6l-133,97c0,0-2,0.9-3,0l-163-58C1127,522,1127,516,1131,516.3z' /> <path fill='#6B6BD9' d='M1689,302l-349,423c-2,2.9-7,1-8-1l-40-138c0-1,0-3,1-5l390-284C1687,291,1692,297,1689,302z' /> <path fill='#9A9AE3' d='M1336,603.7l-2,119c0,2,3,4,5,1l349-423c2-2-1-6.7-4-4l-347,303C1336.6,602,1336,602,1336,603.7z' /> <path fill='#8FECFF' d='M1132,514l564-234c2,0,3,2,1,3l-266,195.8c0,0-0.6,0,0,0l-297,38C1130,518,1130,515,1132,514z' /> <path fill='#CDB3FF' d='M1705,279l-241,211.9c-1,0-1,2-0.7,3l116,239c1,2,4,2,5,0l124-451C1710,279,1707,277.8,1705,279z' /> <path fill='#AD81FF' d='M1341,597l120-104c1-1,3,0,4,0l115.8,238c1,2-1,4-3,3l-236-133c-4.8,2-4.8,0-3.8-2L1341,597z' /> </g> </svg> </body> <script> const planeBody = document.querySelector('.plane-body'); const shadow = document.querySelector('.shadow'); const lines = Array.from(document.querySelectorAll('.line')); planeTl = gsap.timeline({ repeat: -1 }) .to(planeBody, { duration: 1.5, y: 65, ease: 'none' }) .to(shadow, { duration: 1.5, scale: 1.2, transformOrigin: 'center center', ease: 'none' }, 0) .to(planeBody, { duration: 2.5, y: 0, ease: 'power2.out' }, 1.5) .to(shadow, { duration: 2.5, scale: 1, transformOrigin: 'center center', ease: 'power2.out' }, 1.5); lines.forEach((l) => { planeTl.to(l, { duration: 4, attr: { 'stroke-dashoffset': 0 }, ease: 'none' }, 0) }) </script> </html>
-
小程序纯CSS实现用户中奖名单无限滚动 + JS随机生成中奖用户名称 CSS无限滚动中奖人员名单，保持一个理念能用css实现的东西坚决不用js； 滚动的核心3个容器和animation动画 <template> <view> <!-- 外围容器 --> <view class="one"> <!-- 人员列表容器 --> <view class="two"></view> <!-- 重复人员列表容器是实现无缝滚动 --> <view class="two"> </view> </view> </view> </template> <style> .two { animation: myAnimation 16s infinite linear; width: 100%; } /* 滚动动画 */ @keyframes myAnimation { from { transform: translate(0px, 0%); } to { transform: translate(0px, -100%); } } </style>预览 640.gif图片 案例 可直接复制代码到uni-app项目中预览，或者手动修改for循环也可以在原生小程序中预览 <template> <view> <view class="title">中奖名单</view> <!-- 列表 --> <view class="swier"> <view class="swier-gun"> <view class="user-view" v-for="(item, index) in usernames" :key="index"> <view class="user-img"> <img class="all-img" src=""> </view> <view> <view class="user-name"> {{index}}-{{item}} <tex class="user-suo">抽到多多券...</tex> </view> <view class="user-suo user-time"> {{timeDatas[index]}} </view> </view> </view> </view> <!-- 重复人员名称实现无缝滚动 --> <view class="swier-gun"> <view class="user-view" v-for="(item, index) in usernames" :key="index"> <view class="user-img"> <img class="all-img" src=""> </view> <view> <view class="user-name"> {{index}}-{{item}} <tex class="user-suo">抽到多多券...</tex> </view> <view class="user-suo user-time"> {{timeDatas[index]}} </view> </view> </view> </view> </view> </view> </template> <script> export default { data() { return { usernames: [], timeDatas: [], }; }, onLoad() { // 用户名称 40是数量 this.generateNames(40); // 生产不大于现在的时间 this.generTiem(); }, methods: { // 用户名生成 getRandomChar() { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz天地玄黄宇宙洪日月盈昃辰宿列寒来暑往秋收冬闰余成岁律吕调云腾致雨露结霜金生丽水玉出昆剑号巨阙珠称光果珍李柰菜重芥海咸河淡鳞潜羽龙师火帝鸟官人始制文字乃服衣推位让国有虞陶吊民伐罪周发殷坐朝问1234567890'; return chars.charAt(Math.floor(Math.random() * chars.length)); }, getRandomName() { const length = Math.floor(Math.random() * 10) + 5; // 名字长度在5到14之间 const halfLength = Math.floor(length / 2); let name = ''; // 生成前半部分 for (let i = 0; i < halfLength; i++) { name += this.getRandomChar(); } // 添加4个星号 name += '****'; // 生成后半部分 for (let i = 0; i < length - halfLength - 4; i++) { name += this.getRandomChar(); } return name; }, generateNames(count) { for (let i = 0; i < count; i++) { this.usernames.push(this.getRandomName()); } }, generTiem() { // 获取当前日期和时间 function getCurrentDateTime() { const now = new Date(); return now; } // 生成随机时间段（返回Date对象，不晚于当前时间） function getRandomTimeIntervalForTodayUpToNow() { const now = new Date(); const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // 当天的开始时间 // 生成从startOfDay到now之间的随机时间戳 const randomTimestamp = startOfDay.getTime() + Math.random() * (now - startOfDay); return new Date(randomTimestamp); } // 生成40个随机时间段并按时间从大到小排序 function generateAndSortRandomDateTimes(num) { const dateTimes = []; for (let i = 0; i < num; i++) { const randomDateTime = getRandomTimeIntervalForTodayUpToNow(); dateTimes.push(randomDateTime); } // 按时间从大到小排序 dateTimes.sort((a, b) => b - a); // 格式化输出为 YYYY-MM-DD HH:MM:SS return dateTimes.map(date => date.toISOString().slice(0, 19).replace('T', ' ')); } const currentDateTime = getCurrentDateTime(); const randomDateTimes = generateAndSortRandomDateTimes(40); this.timeDatas = randomDateTimes; } }, }; </script> <style> /* 状态栏 */ .nut-navbar { background-color: #ffffff !important; } /* 顶部图片 */ .win-box-img { height: 600rpx; border-radius: 40rpx; overflow: hidden; margin: 30rpx; box-shadow: 2rpx 0 20rpx rgba(0, 0, 0, 0.5); } /* 标题 */ .title { margin: 60rpx 30rpx 30rpx 30rpx; font-size: 40rpx; font-weight: bold; } .swier { height: 800rpx; overflow: hidden; } .swier-gun { animation: myAnimation 16s infinite linear; width: 100%; } @keyframes myAnimation { from { transform: translate(0px, 0%); } to { transform: translate(0px, -100%); } } .user-view { display: flex; margin: 30rpx; } .user-img { width: 80rpx; height: 80rpx; border-radius: 200rpx; flex-shrink: 0; margin-right: 30rpx; background-color: red; } .user-suo { color: #777E90; margin: 0 10rpx; } .user-name { font-size: 28rpx; } .user-time { font-size: 24rpx; } </style>转载自枫瑞博客网
-
简单的html代码做一个数码管钟（可复制源代码） 效果展示 640.gif图片 源码分享 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数码管钟</title> <style> @import url('https://fonts.cdnfonts.com/css/lcd');*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;margin:0;background:linear-gradient(#040909 60vh,#312c2a 80vh);font-family:'LCD',sans-serif;font-family:'LCD2',sans-serif;font-family:'LCDMono2',sans-serif;font-family:'LCDMono',sans-serif;font-family:'Digitalism',sans-serif;--_refl:#f3eeef;--_bloom:#fcfbf9;--_y1:#fae8a5;--_y2:#fbd608;--_o1:#ff8f0c;--_o2:#e74702;--_o3:#b32801;--mw1:#d0d5d7;--m1:#fdea09;--m2:#e46703;--m3:#ac2a04}#noise-svg{height:100%;width:100%;opacity:0.12;position:absolute;z-index:100;pointer-events:none}#noise-rect{width:100vw;height:100vh}.clock{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:calc(var(--_size) * 0.01);--_factor:min(600px,80vh);--_size:min(var(--_factor),80vw)}.shadow{position:absolute;bottom:0;top:0;margin:auto;width:100%;height:0em;translate:0 45em;box-shadow:0 0 3em 2em #040909,0 0 8em 3em var(--_o3),0 0 10em 4em var(--_o2),0 0 10em 5em var(--_o1);opacity:0.6}.shadow::before{content:'';display:block;position:absolute;left:0;right:0;margin:auto;height:20em;width:0;box-shadow:0 0 8em 4em var(--_y1),0 0 8em 6em var(--_y2),0 0 8em 8em var(--_o1),0 0 8em 10em var(--_o2),0 0 8em 12em var(--_o3)}.shadow::after{content:'';display:block;position:absolute;z-index:-1;opacity:0.5;left:0;right:0;margin:auto;border-radius:50%;height:10em;width:10em;border:2px solid red;transform:rotateX(70deg);box-shadow:0 0em 12em 40em var(--_o1),0 0em 12em 60em var(--_o2),0 0em 12em 80em var(--_o3)}.clock.off .shadow{box-shadow:0 0 4em 3em #040909,0 0 8em 3em var(--_o3),0 0 10em 4em var(--_o2),0 0 10em 5em var(--_o1);opacity:0}.outer-pipe{position:absolute;z-index:2;width:calc(var(--_size) * (8/15));height:var(--_size);border-radius:20% / 10%;overflow:hidden;opacity:1;--_clip-btm:85.8%;clip-path:polygon(0 0,100% 0,100% var(--_clip-btm),0 var(--_clip-btm))}.inner-pipe{width:100%;height:100%;scale:0.84 0.91;border-radius:15% / 7%;box-shadow:0em 104em 16em 20em #040909,0em 1.2em 1em 0.2em var(--m3),0em 1.2em 1em 0.5em var(--m2),0em 1.2em 0.5em 1.2em var(--m1),0em 1.2em 1.2em 1.5em var(--m2),0em 1.2em 2em 2em var(--m3),0em 90em 16em 20em #040909,-1em 1em 2em 3.7em #040909,0.5em 0em 2em 3.7em #040909,0em 0em 0em 4.6em var(--mw1),0em 0em 0.5em 5em var(--mw1),0em 0em 0em 20em #040909}.pipe-accents{width:calc(var(--_size) * (8/15));height:var(--_size);position:absolute}.pipe-accents .top-tube,.pipe-accents .top,.pipe-accents .topinset,.pipe-accents .left,.pipe-accents .right{z-index:3}.pipe-accents .top-tube{position:absolute;top:3%;left:0;right:0;margin:auto;width:16%;height:6%;background:#040909;background:linear-gradient(120deg,rgba(60,62,62,1) 0%,rgba(4,9,0,1) 60%);box-shadow:inset -0.2em 1.1em 1.4em -0.4em var(--mw1),inset 0em -1.2em 0.5em -1.1em var(--m1),inset 0em -1.2em 1em -0.8em var(--m2),inset 0em -1.2em 1em -0.2em var(--m3);border-radius:20%}.pipe-accents .tube-holders{position:absolute;width:26em;height:70em;translate:0 -7em;margin:auto;left:0;right:0;top:0;bottom:0;z-index:2}.pipe-accents .tube-holders div{position:absolute;width:3em;height:3em;border-radius:50%;--_metal-1:#30241d;--_metal-2:#000000;--_metal-3:#5f5f5f;--_vl:-8%;background:conic-gradient(from 0deg at 50% 50%,var(--_metal-1) 0%,var(--_metal-2) 7%,var(--_metal-1) 21%,var(--_metal-2) 35%,var(--_metal-2) 42%,var(--_metal-3) 56%,var(--_metal-1) 63%,var(--_metal-1) 70%,var(--_metal-2) 77%,var(--_metal-3) 84%,var(--_metal-2) 91%,var(--_metal-1) 100%);box-shadow:inset 0 0 0.1em 0.1em #ffffff5d,inset 0em -1.2em 0.5em -1.1em var(--m1),inset 0em -1.2em 1em -0.8em var(--m2),inset 0em -1.2em 1em -0.2em var(--m3)}.pipe-accents .tube-holders div:nth-child(1){top:12%;left:var(--_vl);rotate:-65deg}.pipe-accents .tube-holders div:nth-child(2){top:12%;right:var(--_vl);rotate:65deg}.pipe-accents .tube-holders div:nth-child(3){top:26%;left:var(--_vl);rotate:-85deg}.pipe-accents .tube-holders div:nth-child(4){top:26%;right:var(--_vl);rotate:85deg}.pipe-accents .tube-holders div:nth-child(5){top:78.5%;left:var(--_vl);rotate:-115deg}.pipe-accents .tube-holders div:nth-child(6){top:78.5%;right:var(--_vl);rotate:115deg}.pipe-accents .top{position:absolute;top:-0.7%;left:0;right:0;margin:auto;width:22%;height:6%;background:#040909;background:linear-gradient(120deg,rgba(60,62,62,1) 0%,rgba(4,9,0,1) 60%);box-shadow:inset -0.2em 1.1em 1.4em -0.4em var(--mw1),inset 0em -1.2em 0.5em -1.1em var(--m1),inset 0em -1.2em 1em -0.8em var(--m2),inset 0em -1.2em 1em -0.2em var(--m3);border-radius:20%}.pipe-accents .topinset{position:absolute;top:-1.7%;left:0;right:0;margin:auto;width:14%;height:8%;background:#040909;background:linear-gradient(120deg,rgba(60,62,62,1) 0%,rgba(4,9,0,1) 60%);box-shadow:inset -0.2em 1.1em 1.4em -0.4em var(--mw1),inset 0em -1.2em 0.5em -1.1em var(--m1),inset 0em -1.2em 1em -0.8em var(--m2),inset 0em -1.2em 1em -0.2em var(--m3);border-radius:50%}.pipe-accents .topinset::before{content:'';display:block;width:50%;height:50%;border-radius:50%;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;box-shadow:inset 0 0 0em 0.1em #040909,0 0 0.5em 0.1em var(--_bloom),inset 0 0 1.3em 0.2em var(--_o3),inset 0 0 1.3em 0.4em var(--_o2),inset 0 0 1.3em 0.6em var(--_o1),inset 0 0 1.3em 2em var(--_y1);animation:5s flicker linear infinite}@keyframes flicker{0%{opacity:1}10%{opacity:1}11%{opacity:0.8}12%{opacity:1}65%{opacity:1}66%{opacity:0.7}67%{opacity:0.9}68%{opacity:1}69%{opacity:0.4}70%{opacity:1}100%{top:1}}.pipe-accents .left,.pipe-accents .right{width:100%;height:100%;position:absolute}.pipe-accents .left div,.pipe-accents .right div{--_pipe-pos-x:-3%;position:absolute;margin:auto;width:14%;height:2.4%;border-radius:0.7em;background:#040909}.pipe-accents .left div:nth-child(1){top:16%;left:var(--_pipe-pos-x);border-top-right-radius:50%;border-top-left-radius:50%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em -0.5em 0.8em -0.8em var(--m3),inset -1em -0.5em 0.9em -0.5em var(--m2),inset -1em -0.5em 1em -0.3em var(--m1)}.pipe-accents .left div:nth-child(1)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;left:78%;top:40%;rotate:5deg;bottom:0;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset 1em -0.5em 0.3em -0.5em var(--m3),inset 1em -0.5em 0.4em -0.3em var(--m2),inset 1em -0.5em 0.6em -0.2em var(--m1)}.pipe-accents .left div:nth-child(2){top:26%;left:var(--_pipe-pos-x);border-top-right-radius:30%;border-top-left-radius:30%;border-bottom-right-radius:30%;border-bottom-left-radius:30%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em 0em 0.8em -0.6em var(--m3),inset -1em 0em 0.9em 0em var(--m2),inset -1em 0em 1em 0.1em var(--m1)}.pipe-accents .left div:nth-child(2)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;left:78%;top:0%;rotate:2deg;bottom:0;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset 1em -0.1em 0.3em 0em var(--m3),inset 1em -0.1em 0.4em 0.2em var(--m2),inset 1em -0.1em 0.6em -0.3em var(--m1)}.pipe-accents .left div:nth-child(3){top:64%;left:var(--_pipe-pos-x);border-bottom-right-radius:40%;border-bottom-left-radius:40%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em 0.3em 0.8em -0.5em var(--m3),inset -1em 0.3em 0.9em -0.3em var(--m2),inset -1em 0.3em 1em 0em var(--m1)}.pipe-accents .left div:nth-child(3)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;left:78%;top:20%;rotate:-4deg;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset 1em 0.2em 0.3em -0.1em var(--m3),inset 1em 0.2em 0.4em 0em var(--m2),inset 1em 0.2em 0.6em 0.1em var(--m1)}.pipe-accents .right div:nth-child(1){top:16%;right:var(--_pipe-pos-x);border-top-right-radius:50%;border-top-left-radius:50%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em -0.5em 0.8em -0.8em var(--m3),inset 1em -0.5em 0.9em -0.5em var(--m2),inset 1em -0.5em 1em -0.3em var(--m1)}.pipe-accents .right div:nth-child(1)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;right:78%;top:40%;rotate:-5deg;bottom:0;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset -1em -0.5em 0.3em -0.5em var(--m3),inset -1em -0.5em 0.4em -0.3em var(--m2),inset -1em -0.5em 0.6em -0.2em var(--m1)}.pipe-accents .right div:nth-child(2){top:26%;right:var(--_pipe-pos-x);border-top-right-radius:30%;border-top-left-radius:30%;border-bottom-right-radius:30%;border-bottom-left-radius:30%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em 0em 0.8em -0.6em var(--m3),inset 1em 0em 0.9em 0em var(--m2),inset 1em 0em 1em 0.1em var(--m1)}.pipe-accents .right div:nth-child(2)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;right:78%;top:0%;rotate:-2deg;bottom:0;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset -1em -0.1em 0.3em 0em var(--m3),inset -1em -0.1em 0.4em 0.2em var(--m2),inset -1em -0.1em 0.6em -0.3em var(--m1)}.pipe-accents .right div:nth-child(3){top:64%;right:var(--_pipe-pos-x);border-bottom-right-radius:40%;border-bottom-left-radius:40%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em 0.3em 0.8em -0.5em var(--m3),inset 1em 0.3em 0.9em -0.3em var(--m2),inset 1em 0.3em 1em 0em var(--m1)}.pipe-accents .right div:nth-child(3)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;right:78%;top:20%;rotate:4deg;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset -1em 0.2em 0.3em -0.1em var(--m3),inset -1em 0.2em 0.4em 0em var(--m2),inset -1em 0.2em 0.6em 0.1em var(--m1)}.pipe-accents .bottom-left{position:absolute;bottom:12%;left:-6%;width:20%;height:2.4%;background:#040909;border-radius:40%;border-top-left-radius:50%;border-top-right-radius:50%;box-shadow:inset -0.4em -0.1em 1em -0.4em var(--mw1),inset -2em 0em 1.8em -1.5em var(--m3),inset -2em 0em 1.9em -1.3em var(--m2),inset -2em 0em 2em -1em var(--m1)}.pipe-accents .bottom-left::before{display:block;content:'';position:absolute;top:-24%;left:0;right:0;margin:auto;background:#040909;width:90%;height:70%;border-radius:50%;border-top-left-radius:40%;border-top-right-radius:40%;box-shadow:inset -0.4em 0em 1em -0.3em var(--mw1),inset -2em 0em 1.8em -1.5em var(--m3),inset -2em 0em 1.9em -1.3em var(--m2),inset -2em 0em 2em -1em var(--m1)}.pipe-accents .bottom-right{position:absolute;bottom:12%;right:-6%;width:20%;height:2.4%;background:#040909;border-radius:40%;border-top-left-radius:50%;border-top-right-radius:50%;box-shadow:inset -0.4em -0.1em 1em -0.4em var(--mw1),inset 2em 0em 1.8em -1.5em var(--m3),inset 2em 0em 1.9em -1.3em var(--m2),inset 2em 0em 2em -1em var(--m1)}.pipe-accents .bottom-right::before{display:block;content:'';position:absolute;top:-24%;left:0;right:0;margin:auto;background:#040909;width:90%;height:70%;border-radius:50%;border-top-left-radius:40%;border-top-right-radius:40%;box-shadow:inset -0.4em 0em 1em -0.3em var(--mw1),inset 2em 0em 1.8em -1.5em var(--m3),inset 2em 0em 1.9em -1.3em var(--m2),inset 2em 0em 2em -1em var(--m1)}.small-outer-pipe{position:absolute;translate:0 -5.6%;width:calc(var(--_size) * (1/2.7));height:calc(var(--_size) * 0.87);border-radius:40% / 10%;overflow:hidden;opacity:1;--_clip-btm:96%;clip-path:polygon(0 0,100% 0,100% var(--_clip-btm),0 var(--_clip-btm));border-top:0.3em solid var(--mw1)}.small-inner-pipe{width:100%;height:100%;scale:0.92 0.98;border-radius:35% / 10%;box-shadow:0em -94em 20em 20em #040909,0em 104em 20em 20em #040909,0em 1em 1em 0.2em var(--m3),0em 1em 1em 0.5em var(--m2),0em 1em 0.5em 1.2em var(--m1),0em 1em 1.2em 1.5em var(--m2),0em 1em 2em 2em var(--m3),-0.2em 0.5em 0.8em -0.2em var(--mw1),0em 90em 16em 20em #040909,-1em 1em 2em 2em #040909,0.5em 0em 2em 2em #040909,0em 0em 0em 4.6em var(--mw1),0em 0em 1.5em 5em var(--mw1),0em 0em 0em 20em #040909}.base-container{position:absolute;width:calc(var(--_size) * (8/15));height:var(--_size)}.base-container .base{width:100%;height:100%;position:absolute}.base-container .base div{background:#040909;position:absolute;bottom:4%;left:-10%;width:120%;height:12%;border-radius:40% 40% / 30% 30%;box-shadow:0 2em 2em -1.4em #000,inset -0.4em 0.1em 0.8em -0.2em var(--mw1)}.base-container .base div::before{content:"";display:block;width:100%;height:50%;border-radius:100%;box-shadow:0 2em 10em 0 #000,inset -0.4em 0em 0.8em 0em var(--mw1),inset 0em 0em 0.5em 0.3em #040909,inset 0em 0em 0.5em 0.3em #040909,inset 0em 0em 1em 0em #040909,inset 0em 0em 2em 0em #040909,inset 0em 0em 3em 0em #040909,inset 0em 0em 1em 0em var(--m3),inset 0em 0em 1em 2em var(--m2),inset 1em 0.3em 10em 10em var(--m1)}.display{color:var(--_bloom);font-size:14em;line-height:0.8em;translate:0 -0.4em}.display .row{display:flex}.display .small-row{font-size:0.3em;position:absolute;right:-22%;top:10%}.display .small-row .row{flex-direction:column;line-height:1.02em}.display .row .col{display:flex;position:relative}.display .row .col>div:nth-child(1){opacity:0.2}.display .row .col>div:nth-child(2){position:absolute;right:0;z-index:2}.display .row .col>div:nth-child(3){position:absolute;right:0;color:var(--_bloom);--_o1-size:0.1em;--_o2-size:0.4em;--_o3-size:0.6em;text-shadow:0em 0em 0.04em var(--_bloom),0em 0em 0.04em var(--_bloom),0em 0em var(--_o3-size) var(--_o3),0em 0em var(--_o3-size) var(--_o3),0em 0em var(--_o3-size) var(--_o3),0em 0em var(--_o3-size) var(--_o3),0em 0em var(--_o2-size) var(--_o2),0em 0em var(--_o2-size) var(--_o2),0em 0em var(--_o2-size) var(--_o2),0em 0em var(--_o2-size) var(--_o2),0em 0em var(--_o1-size) var(--_o1),0em 0em var(--_o1-size) var(--_o1),0em 0em var(--_o1-size) var(--_o1),0em 0em var(--_o1-size) var(--_o1)}.glass-tube{position:absolute;width:26em;height:70em;translate:0 -7em;border-radius:1000px;box-shadow:0em 0em 1em -0.2em var(--m1),0em 0em 2em -0.4em var(--m2),0em 0em 3em -0.4em var(--m2),inset 0em 0em 0.4em 0.2em var(--m3),inset 0em 0em 0.6em 0.4em var(--m2),inset 0em 0em 1em 0.7em var(--m1),inset 0em 0em 3em 0em var(--m2),inset 0em 0em 5em 1em var(--m3),inset -0.1em 0.1em 0.1em 0em var(--mw1),inset 0 0 1em 0.1em var(--mw1)}.glass-tube::before{content:"";display:block;width:6%;opacity:0.9;height:60%;box-shadow:inset 1.5em 0em 1em -1em var(--mw1);position:absolute;left:4%;top:16%;filter:blur(0.6px);opacity:0.8;border-radius:50% 1% / 50% 100%}.glass-tube::after{content:"";display:block;width:30%;opacity:0.9;height:60%;box-shadow:inset -1em 0.5em 1em -1em var(--mw1);position:absolute;right:4%;top:4%;filter:blur(0.6px);opacity:1;border-radius:0% 100% / 10% 30%}.hex{position:absolute;width:17.7em;height:70em;translate:0 -7em;border-radius:1000px;overflow:hidden;z-index:-1;opacity:0.7;--_hex-cl1:#040909;--_hex-cl2:var(--_o1);--_hex-size:2.18em;background:radial-gradient(circle farthest-side at 0% 50%,var(--_hex-cl1) 23.5%,rgba(240,166,17,0) 0) calc(1.06*var(--_hex-size)) calc(1.5*var(--_hex-size)),radial-gradient(circle farthest-side at 0% 50%,var(--_hex-cl2) 24%,rgba(240,166,17,0) 0) calc(0.94*var(--_hex-size)) calc(1.5*var(--_hex-size)),linear-gradient(var(--_hex-cl1) 14%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 85%,var(--_hex-cl1) 0)0 0,linear-gradient(150deg,var(--_hex-cl1) 24%,var(--_hex-cl2) 0,var(--_hex-cl2) 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,var(--_hex-cl2) 0,var(--_hex-cl2) 76%,var(--_hex-cl1) 0)0 0,linear-gradient(30deg,var(--_hex-cl1) 24%,var(--_hex-cl2) 0,var(--_hex-cl2) 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,var(--_hex-cl2) 0,var(--_hex-cl2) 76%,var(--_hex-cl1) 0)0 0,linear-gradient(90deg,var(--_hex-cl2) 2%,var(--_hex-cl1) 0,var(--_hex-cl1) 98%,var(--_hex-cl2) 0%)0 0 var(--_hex-cl1);background-size:calc(2*var(--_hex-size)) calc(3*var(--_hex-size))}.hex .overlay{position:absolute;background:#fff;mix-blend-mode:overlay;width:200%;left:-40%;height:12%;rotate:40deg;animation:5s electric ease-in infinite}@keyframes electric{0%{top:700%}100%{top:-20%}}.tube-base-container{position:absolute;width:34em;height:30em;translate:0 24em}.tube-base{position:absolute;bottom:4%;width:60%;height:20%;background:#040909;left:0;right:0;margin:auto;border-radius:80% / 40%;box-shadow:inset 0em -0.1em 1.2em -0.4em var(--mw1),inset 0em 3em 2.8em -2.5em var(--m3),inset 0em 3em 3.9em -2.3em var(--m2),inset 0em 3em 4em -2em var(--m1)}.tube-base::before{display:block;content:'';width:99%;height:42%;background:#040909;border-radius:50%;box-shadow:inset 0em -0.1em 1.2em -0.4em var(--mw1),inset 0em 0em 1.8em -0.5em var(--m3),inset 0em 0em 1.9em -0.3em var(--m2),inset 0em 0em 2em -0em var(--m1)}.tube-btm{width:40%;height:10%;position:absolute;left:0;right:0;margin:auto;bottom:34%;background-color:#040909;border-radius:20% 20% 100% 100%;box-shadow:inset 0em 0em 1.2em -0.2em var(--mw1),inset 0em 0.3em 1.2em 0em var(--m1),inset 0em 0.3em 1.2em 0.3em var(--m2),inset 0em 0.3em 1.2em 0.6em var(--m3)}.tube-btm::before{content:'';display:block;width:60%;height:40%;position:absolute;left:0;right:0;margin:auto;bottom:-158%;border-radius:30% 30% 100% 100%;background-color:#040909;box-shadow:inset 0em -0.1em 0.7em -0.2em var(--mw1),inset 0em 0.1em 1em -0.7em var(--m1),inset 0em 0.1em 1em -0.3em var(--m2),inset 0em 0.1em 1em -0em var(--m3)}.rods{width:50%;height:28%;position:absolute;left:0;right:0;margin:auto;bottom:14%;--_clip-btm:80%;clip-path:polygon(0 0,100% 0,100% var(--_clip-btm),0 var(--_clip-btm))}.rods .left-rod{width:60%;height:12%;rotate:60deg;position:absolute;bottom:40%;left:0;background:#040909}.rods .center-rod{width:30%;height:12%;rotate:90deg;position:absolute;bottom:40%;right:0;left:0;margin:auto;background:#040909}.rods .right-rod{width:60%;height:12%;rotate:-60deg;position:absolute;bottom:40%;right:0;background:#040909}.rods .left-rod,.rods .center-rod,.rods .right-rod{box-shadow:inset 0em 0.1em 0.8em -0.2em var(--mw1),inset 0em 0.1em 1em -0.7em var(--m1),inset 0em 0.1em 1em -0.3em var(--m2),inset 0em 0.1em 1em -0em var(--m3)}.wires{width:100%;height:100%;z-index:-1}.wires div:nth-child(1),.wires div:nth-child(2){width:18%;height:18%;rotate:25deg;translate:14em -5em;position:absolute;bottom:0;box-shadow:inset 0em 0.1em 0.4em 0em var(--mw1),inset 0 0 0 0.5em #040909;border-radius:0% 100% / 50% 100%}.wires div:nth-child(2){translate:15em -8em;rotate:122deg;scale:0.7}.button{position:absolute;width:4em;height:4em;border-radius:50%;translate:0 0em;left:0;right:0;margin:auto;top:0;bottom:0;translate:0 43em;z-index:100;cursor:pointer;background:var(--_bloom);box-shadow:0em -0.1em 0.2em 0em var(--_o1),0em -0.1em 0.2em 0.1em var(--_o2),0em -0.1em 0.2em 0.2em var(--_o3),0em -0.1em 1em 0.5em var(--_bloom),inset 0em 0em 1em 0em var(--_o3),inset 0em 0em 1em 0.5em var(--_o2),inset 0em 0em 1em 1em var(--_o1);filter:blur(1px)}.power-cord{z-index:-1;scale:1.4 0.9;position:absolute;width:100%;height:50em;top:0;bottom:0;margin:auto;translate:-36em 44em;transform:rotateX(55deg) rotateZ(-64deg)}.power-cord div:nth-child(1){width:20em;height:18em;box-shadow:0.3em 0.3em 0.2em 0.1em rgba(255,255,255,0.2);border-bottom:6px solid #040909;border-right:4px solid #040909;position:absolute;left:0;right:0;translate:39.3em 0em;margin:auto;bottom:4%;border-radius:100% 30% / 100% 0}.power-cord div:nth-child(2){width:20em;height:12em;box-shadow:inset 0.3em 0.1em 0.2em -0.1em rgba(255,255,255,0.2);border-top:3px solid #04090977;border-left:4px solid #040909;position:absolute;translate:58em 0.2em;left:0;right:0;margin:auto;bottom:40%;border-radius:100% 30% / 100% 0}*,*:before,*:after{transition:box-shadow 0.2s ease-in-out,opacity 0.2s ease-in-out;user-select:none}.clock.off .hex{opacity:0.3;filter:grayscale(1)}.clock.off .hex .overlay{display:none}.clock.off .pipe-accents .top-tube,.clock.off .pipe-accents .top,.clock.off .pipe-accents .topinset{box-shadow:inset -0.2em 1.1em 1.4em -0.4em var(--mw1),inset 0em -1.2em 0.5em -1.1em rgba(0,0,0,0),inset 0em -1.2em 1em -0.8em rgba(0,0,0,0),inset 0em -1.2em 1em -0.2em rgba(0,0,0,0)}.clock.off .pipe-accents .topinset::before{box-shadow:inset 0 0 0em 0.1em #040909,-0.1em 0.2em 0.7em 0.1em rgba(255,255,255,0.4),inset 0 0 1.3em 0.2em rgba(0,0,0,0),inset 0 0 1.3em 0.4em rgba(0,0,0,0),inset 0 0 1.3em 0.6em rgba(0,0,0,0),inset 0 0 1.3em 2em rgba(0,0,0,0);animation-play-state:paused}.clock.off .pipe-accents .tube-holders div{box-shadow:inset 0 0 0.1em 0.1em #ffffff5d,inset 0em -1.2em 0.5em -1.1em rgba(0,0,0,0),inset 0em -1.2em 1em -0.8em rgba(0,0,0,0),inset 0em -1.2em 1em -0.2em rgba(0,0,0,0)}.clock.off .inner-pipe{box-shadow:0em 104em 16em 20em #040909,0em 1.2em 1em 0.2em rgba(0,0,0,0),0em 1.2em 1em 0.5em rgba(0,0,0,0),0em 1.2em 0.5em 1.2em rgba(0,0,0,0),0em 1.2em 1.2em 1.5em rgba(0,0,0,0),0em 1.2em 2em 2em rgba(0,0,0,0),0em 90em 16em 20em #040909,-1em 1em 2em 3.7em #040909,0.5em 0em 2em 3.7em #040909,0em 0em 0em 4.6em var(--mw1),0em 0em 0.5em 5em var(--mw1),0em 0em 0em 20em #040909}.clock.off .small-inner-pipe{width:100%;height:100%;scale:0.92 0.98;border-radius:35% / 10%;box-shadow:0em -94em 20em 20em #040909,0em 104em 20em 20em #040909,0em 1em 1em 0.2em rgba(0,0,0,0),0em 1em 1em 0.5em rgba(0,0,0,0),0em 1em 0.5em 1.2em rgba(0,0,0,0),0em 1em 1.2em 1.5em rgba(0,0,0,0),0em 1em 2em 2em rgba(0,0,0,0),-0.2em 0.5em 0.8em -0.2em var(--mw1),0em 90em 16em 20em #040909,-1em 1em 2em 2em #040909,0.5em 0em 2em 2em #040909,0em 0em 0em 4.6em var(--mw1),0em 0em 1.5em 5em var(--mw1),0em 0em 0em 20em #040909}.clock.off .pipe-accents .bottom-left{box-shadow:inset -0.4em -0.1em 1em -0.4em var(--mw1),inset -3em 0em 1.8em -1.5em rgba(0,0,0,0),inset -3em 0em 1.9em -1.3em rgba(0,0,0,0),inset -3em 0em 2em -1em rgba(0,0,0,0)}.clock.off .pipe-accents .bottom-left::before{box-shadow:inset -0.4em 0em 1em -0.3em var(--mw1),inset -3em 0em 1.8em -1.5em rgba(0,0,0,0),inset -3em 0em 1.9em -1.3em rgba(0,0,0,0),inset -3em 0em 2em -1em rgba(0,0,0,0)}.clock.off .pipe-accents .bottom-right{box-shadow:inset -0.4em -0.1em 1em -0.4em var(--mw1),inset 3em 0em 1.8em -1.5em rgba(0,0,0,0),inset 3em 0em 1.9em -1.3em rgba(0,0,0,0),inset 3em 0em 2em -1em rgba(0,0,0,0)}.clock.off .pipe-accents .bottom-right::before{box-shadow:inset -0.4em 0em 1em -0.3em var(--mw1),inset 3em 0em 1.8em -1.5em rgba(0,0,0,0),inset 3em 0em 1.9em -1.3em rgba(0,0,0,0),inset 3em 0em 2em -1em rgba(0,0,0,0)}.clock.off .pipe-accents .left div:nth-child(1){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em -0.5em 0.8em -0.8em rgba(0,0,0,0),inset -1em -0.5em 0.9em -0.5em rgba(0,0,0,0),inset -1em -0.5em 1em -0.3em rgba(0,0,0,0)}.clock.off .pipe-accents .left div:nth-child(1)::before,.clock.off .pipe-accents .left div:nth-child(2)::before,.clock.off .pipe-accents .left div:nth-child(3)::before,.clock.off .pipe-accents .right div:nth-child(1)::before,.clock.off .pipe-accents .right div:nth-child(2)::before,.clock.off .pipe-accents .right div:nth-child(3)::before{box-shadow:inset 0em 0.3em 0.6em -0.3em var(--mw1),inset 1em -0.5em 0.3em -0.5em rgba(0,0,0,0),inset 1em -0.5em 0.4em -0.3em rgba(0,0,0,0),inset 1em -0.5em 0.6em -0.2em rgba(0,0,0,0)}.clock.off .pipe-accents .left div:nth-child(2){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em 0em 0.8em -0.6em rgba(0,0,0,0),inset -1em 0em 0.9em 0em rgba(0,0,0,0),inset -1em 0em 1em 0.1em rgba(0,0,0,0)}.clock.off .pipe-accents .left div:nth-child(3){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em 0.3em 0.8em -0.5em rgba(0,0,0,0),inset -1em 0.3em 0.9em -0.3em rgba(0,0,0,0),inset -1em 0.3em 1em 0em rgba(0,0,0,0)}.clock.off .pipe-accents .right div:nth-child(1){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em -0.5em 0.8em -0.8em rgba(0,0,0,0),inset 1em -0.5em 0.9em -0.5em rgba(0,0,0,0),inset 1em -0.5em 1em -0.3em rgba(0,0,0,0)}.clock.off .pipe-accents .right div:nth-child(2){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em 0em 0.8em -0.6em rgba(0,0,0,0),inset 1em 0em 0.9em 0em rgba(0,0,0,0),inset 1em 0em 1em 0.1em rgba(0,0,0,0)}.clock.off .pipe-accents .right div:nth-child(3){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em 0.3em 0.8em -0.5em rgba(0,0,0,0),inset 1em 0.3em 0.9em -0.3em rgba(0,0,0,0),inset 1em 0.3em 1em 0em rgba(0,0,0,0)}.clock.off .base-container .base div::before{box-shadow:0 2em 10em 0 #000,inset -0.4em 0em 0.8em 0em var(--mw1),inset 0em 0em 0.5em 0.3em #040909,inset 0em 0em 0.5em 0.3em #040909,inset 0em 0em 1em 0em #040909,inset 0em 0em 2em 0em #040909,inset 0em 0em 3em 0em #040909,inset 0em 0em 1em 0em rgba(0,0,0,0),inset 0em 0em 1em 2em rgba(0,0,0,0),inset 1em 0.3em 10em 10em rgba(0,0,0,0)}.clock.off .display .row .col>div:nth-child(2){opacity:0}.clock.off .display .row .col>div:nth-child(3){opacity:0}.clock.off .glass-tube{box-shadow:0em 0em 1em -0.2em rgba(0,0,0,0),0em 0em 2em -0.4em rgba(0,0,0,0),0em 0em 3em -0.4em rgba(0,0,0,0),inset 0em 0em 0.4em 0.2em rgba(0,0,0,0),inset 0em 0em 0.6em 0.4em rgba(0,0,0,0),inset 0em 0em 1em 0.7em rgba(0,0,0,0),inset 0em 0em 3em 0em rgba(0,0,0,0),inset 0em 0em 5em 1em rgba(0,0,0,0),inset -0.1em 0.1em 0.1em 0em var(--mw1),inset 0 0 1em 0.1em var(--mw1)}.clock.off .tube-base{box-shadow:inset 0em -0.1em 1.2em -0.4em var(--mw1),inset 0em 3em 2.8em -2.5em rgba(0,0,0,0),inset 0em 3em 3.9em -2.3em rgba(0,0,0,0),inset 0em 3em 4em -2em rgba(0,0,0,0)}.clock.off .tube-base::before{box-shadow:inset 0em -0.1em 1.2em -0.4em var(--mw1),inset 0em 0em 1.8em -0.5em rgba(0,0,0,0),inset 0em 0em 1.9em -0.3em rgba(0,0,0,0),inset 0em 0em 2em -0em rgba(0,0,0,0)}.clock.off .tube-btm{box-shadow:inset 0em 0em 1.2em -0.2em var(--mw1),inset 0em 0.3em 1.2em 0em rgba(0,0,0,0),inset 0em 0.3em 1.2em 0.3em rgba(0,0,0,0),inset 0em 0.3em 1.2em 0.6em rgba(0,0,0,0)}.clock.off .tube-btm::before{box-shadow:inset 0em -0.1em 0.7em -0.2em var(--mw1),inset 0em 0.1em 1em -0.7em rgba(0,0,0,0),inset 0em 0.1em 1em -0.3em rgba(0,0,0,0),inset 0em 0.1em 1em -0em rgba(0,0,0,0)}.clock.off .rods .left-rod,.clock.off .rods .center-rod,.clock.off .rods .right-rod{box-shadow:inset 0em 0.1em 0.8em -0.2em var(--mw1),inset 0em 0.1em 1em -0.7em rgba(0,0,0,0),inset 0em 0.1em 1em -0.3em rgba(0,0,0,0),inset 0em 0.1em 1em -0em rgba(0,0,0,0)}.clock.off .wires div:nth-child(1),.clock.off .wires div:nth-child(2){box-shadow:inset 0em 0.1em 0.4em -0.1em var(--mw1),inset 0 0 0 0.5em #040909}.clock.off .button{background:#8d8d8d;box-shadow:0em -0.1em 0.2em 0em #040909,0em -0.1em 0.2em 0.1em #040909,0em 0em 1em 0.5em var(--_bloom),0em -0.1em 1em 0.5em #040909,inset 0em 0em 1em 0em var(--mw1),inset 0em 0em 1em 0.5em var(--mw1),inset 0em 0em 1em 1em var(--mw1);filter:blur(0.7px);animation:5s flicker linear infinite} </style> </head> <body> <svg id="noise-svg"> <filter id='noiseFilter'> <feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch' /> </filter> <rect id="noise-rect" filter='url(#noiseFilter)' /> </svg> <div class="clock off"> <div class="shadow"></div> <div class="base-container"> <div class="base"> <div></div> </div> </div> <div class="small-outer-pipe"> <div class="small-inner-pipe"></div> </div> <div class="outer-pipe"> <div class="inner-pipe"></div> </div> <div class="pipe-accents"> <div class="top-tube"></div> <div class="tube-holders"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="top"></div> <div class="topinset"></div> <div class="left"> <div></div> <div></div> <div></div> </div> <div class="right"> <div></div> <div></div> <div></div> </div> <div class="bottom-left"></div> <div class="bottom-right"></div> </div> <div class="display"> <div class="row"> <div class="col"> <div>8</div> <div id="char01">0</div> <div id="char02">0</div> </div> <div class="col"> <div>8</div> <div id="char11">0</div> <div id="char12">0</div> </div> </div> <div class="row"> <div class="col"> <div>8</div> <div id="char21">0</div> <div id="char22">0</div> </div> <div class="col"> <div>8</div> <div id="char31">0</div> <div id="char32">0</div> </div> </div> <div style="height: 0.2em;"></div> <div class="small-row"> <div class="row"> <div class="col"> <div>8</div> <div id="char41">0</div> <div id="char42">0</div> </div> <div class="col"> <div>8</div> <div id="char51">0</div> <div id="char52">0</div> </div> </div> </div> <div class="row"> <div class="col"> <div>8</div> <div id="char61">0</div> <div id="char62">0</div> </div> <div class="col"> <div>8</div> <div id="char71">0</div> <div id="char72">0</div> </div> </div> <div class="row"> <div class="col"> <div>8</div> <div id="char81">0</div> <div id="char82">0</div> </div> <div class="col"> <div>8</div> <div id="char91">0</div> <div id="char92">0</div> </div> </div> <div class="row"> <div class="col"> <div>8</div> <div id="char101">0</div> <div id="char102">0</div> </div> <div class="col"> <div>8</div> <div id="char111">0</div> <div id="char112">0</div> </div> </div> </div> <div class="glass-tube"></div> <div class="hex"> <div class="overlay"></div> </div> <div class="tube-base-container"> <div class="wires"> <div></div> <div></div> </div> <div class="tube-base"></div> <div class="rods"> <div class="left-rod"></div> <div class="center-rod"></div> <div class="right-rod"></div> </div> <div class="tube-btm"></div> </div> <div class="power-cord"> <div></div> <div></div> </div> <div class="button" onclick="body.querySelector('.clock').classList.toggle('off')"> <div></div> </div> </div> </body> <script> function updateTimeAndDate(){const now=new Date();let hours=now.getHours();const minutes=now.getMinutes().toString().padStart(2,'0');let amPm=hours>=12?'PM':'AM';if(hours>12){hours-=12}else if(hours===0){hours=12}let timeStr=hours.toString().padStart(2,'0')+minutes;if(timeStr.startsWith('0')){timeStr=' '+timeStr.slice(1)}let month=(now.getMonth()+1).toString().padStart(2,'0');let day=now.getDate().toString().padStart(2,'0');const year=now.getFullYear().toString().slice(-2);if(month.startsWith('0')){month=' '+month.slice(1)}if(day.startsWith('0')){day=' '+day.slice(1)}const displayStr=timeStr+amPm+month+day+year;for(let i=0;i<12;i++){document.getElementById('char'+i+'1').textContent=displayStr[i];document.getElementById('char'+i+'2').textContent=displayStr[i]}}updateTimeAndDate();setInterval(updateTimeAndDate,60000); </script> </html>
-
生活分享网站源码 博客风格分享小清新php源码 资源简介 这套模板是从站酷的设计作品里看到的，觉得很简介，所以就把他仿出来了。 模板分为头部、底部、主页、文章列表页、文章内容页、图集列表页和图集内容页。 可以用做美女站、博客站等。 运行环境 ph+mysql 注意事项 首页幻灯片和公告和广告图，都在后台“模块-广告管理”中修改！ 后台 “系统-数据库备份/还原” 还原数据，可以得到幻灯片等的代码和部分体验数据 ！因为广告代码中包含幻灯片的name编码数据！不还原数据库得到代码无法显示幻灯片！！切记切记 下载地址 https://lightweb.lanzout.com/ifhIX1sbeweb 图片
-
基于POSCMS架构开发的素材资源网平台整站全面修复版源码 资源简介 基于POSCMS架构开发的素材资源网平台整站全面修复版源码一键安装版 系统功能介绍 支持文章、论坛、下载、图片、小说、视频、商城、专题等等模块，所有模块都支持自定义字段，你想到的网站功能都能实现。 会 员 组 ：会员组价格+时间+权限，会员等级以及图标。 支付接口：微信 支付宝 以及本站对接的免签支付整套系统。 插件介绍：签到 打赏 百度推送 文章内链。 远程附件：腾讯云 百度云 阿里云。 系统缓存： 文件缓存、Memcached缓存、Redis缓存、WinCache缓存、APC缓存。 其他功能：自定义伪静态规则、生成静态页、自定义页面、上传投稿、评论、会员打折、短信邮件、多语言。 运行环境： PHP5.6～7.0+MYSQL5.5～5.6 添加伪静态规则 安装说明 一键安装：http://你的域名/install.php 默认用户名及密码：admin 下载地址： 点击下载 下载地址：https://lightweb.lanzout.com/ivp7K1mwwcmh 提取码： ls2tymlt.png图片
