这是一款侧边动态时间小工具,逛博客的时候看到好看就扒来了,这个是纯时间动态,带有一些特效,非常好看,喜欢的自行部署吧
将下面的代码放到:WP后台->>外观–>>小工具–>>自定义HTML即可
<style> .times { margin: 0; padding: 0; height: 100%; } .times2 { height: 100%; background: #fff; } .times2 svg { height: 100%; width: 100%; margin-bottom: -34px; } .words { font-size: 60px; font-weight: bold; text-transform: uppercase; fill: none; stroke-width: 5px; stroke-dasharray: 90, 310; animation: drawing 8s linear infinite; } .words-1 { stroke: deepskyblue; text-shadow: 0 0 50px deepskyblue; animation-delay: -2s; } .words-2 { stroke: lightseagreen; text-shadow: 0 0 50px lightseagreen; animation-delay: -4s; } .words-3 { stroke: orange; text-shadow: 0 0 50px orange; animation-delay: -6s; } .words-4 { stroke: purple; text-shadow: 0 0 50px purple; animation-delay: -8s; } @keyframes drawing { 100% { stroke-dashoffset: -400; } } </style> <div class="sidebox sidebox--desk"> <div class="times"> <div class="sidebox__content" style="padding: 0;"> <div style="border-radius:15px;" class="times2"> <svg> <text text-anchor="middle" x="50%" y="50%" class="words words-1"></text> <text text-anchor="middle" x="50%" y="50%" class="words words-2"></text> <text text-anchor="middle" x="50%" y="50%" class="words words-3"></text> <text text-anchor="middle" x="50%" y="50%" class="words words-4"></text> </svg> </div> </div> </div> </div> <script> function showtime() { const now = new Date(); let h = now.getHours(); let m = now.getMinutes(); let s = now.getSeconds(); h = checktime(h); m = checktime(m); s = checktime(s); return `${h}:${m}:${s}`; } function checktime(x) { return x < 10 ? `0${x}` : x; } const texts = document.querySelectorAll("text"); setInterval(() => { const time = showtime(); texts.forEach(text => { text.textContent = time; }); }, 1000); </script>
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
如若转载,请注明出处:https://www.zxperson.com/149.html
【CF手游国际服测试中】免验证安装包下载+永久英雄级武器领取攻略
07-03
Chatlog开源工具:一键解锁微信聊天记录结构化搜索与API调用 | Windows/macOS通用
07-01
OpenSpeedy:免费开源游戏变速工具,安全突破帧率限制,畅享丝滑加速
06-24
轻量化个人云盘系统源码:高效管理、全端自适应、开源免费!
06-23
wechatDataBackup:一键永久备份微信聊天记录!开源免费,支持20+消息类型导出
06-18
多种方式实现html瀑布流布局(flex,column-count,grid布局,float布局)
05-30
MediaGo:跨平台视频提取下载的开源神器
05-29
NTQQ跳转加好友接口,NTQQ跳转加好友代码
05-26
微信防撤回多开:BetterWx-UI v2.0.7
05-12
抖音,快手,皮皮虾,汽水音乐解析API接口源码
05-06
一键批量无损放大图片!告别单张处理,效率飙升的高效工具推荐
06-30
免费下载海量Labubu壁纸!1000+动态与4K高清壁纸,每日更新!
06-27
Windows更新暂停器:掌控系统更新的利器
06-19
免费开源!BilldDesk v0.30.0远程桌面:全平台高清控制+私有化部署指南
06-17
自动抽奖系统:提升活动效率与用户体验的智能利器
06-16
苦瓜书盘(kgbook)入口:免费下载海量6寸PDF/MOBI电子书的宝藏网站
06-12
Fluent M3U8 - 免费 m3u8 视频下载工具
06-11
PhotoScissors(AI智能抠图工具) v9.3.1 绿色汉化版
06-10
电脑微信数据深度清理神器 Clean WeChat X 4.0 绿色便携版
06-09
LazPaint:轻量级但功能强大的免费图片编辑器 | 完美替代Windows画图
06-06
09日04日,星期三,在这里每天60秒读懂世界!
09-04
08日28日,星期三,在这里每天60秒读懂世界!
08-28
07日19日,星期五,在这里每天60秒读懂世界!
07-19
07日18日,星期四,在这里每天60秒读懂世界!
07-19
07日17日,星期三,在这里每天60秒读懂世界!
07-17
07日16日,星期二,在这里每天60秒读懂世界!
07-16
07日15日,星期一,在这里每天60秒读懂世界!
07-15
07日14日,星期日,在这里每天60秒读懂世界!
07-15
07日13日,星期六,在这里每天60秒读懂世界!
07-13
07日12日,星期五,在这里每天60秒读懂世界!
07-12