简约动态时钟h5源码分享-可做桌面动态壁纸

最新推荐文章于 2025-03-31 20:04:10 发布

苏州凯捷智能科技有限公司

最新推荐文章于 2025-03-31 20:04:10 发布

阅读量1.2k

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_39934361/article/details/121868749

版权

简约动态时钟h5源码分享-可做桌面动态壁纸

🌟博主介绍
介绍
css源码
JS源码
Html源码

🌟博主介绍

💂 个人主页:苏州凯捷智能科技有限公司
💂 个人社区:优快云全国各地程序猿
🤟作者介绍：苏州凯捷智能科技有限公司创始人，主要目前与华为合作5G工业机器人领域开发，2D、3D视觉项目开发，政府项目投标开发，
💬如果文章对你有帮助，欢迎关注、点赞、收藏（一键三连）
🎗️ 承接软件APP、小程序、网站等开发重点行业应用开发（SaaS、PaaS、CRM、HCM、银行核心系统、监管报送平台、系统搭建、人工智能助理）、大数据平台开发、商业智能、App开发、ERP、云平台、智能终端、产品化解决方案。测试软件产品测试、应用软件测试、测试平台及产品、测试解决方案。运维数据库维护（SQL Server 、Oracle、MySQL）、操作系统维护（Windows、Linux、Unix等常用系统）、服务器硬件设备维护、网络设备维护、运维管理平台等。运营服务IT咨询、IT服务、业务流程外包（BPO）、云/基础设施的管理、线上营销、数据采集与标注、内容管理和营销、设计服务、本地化、智能客服、大数据分析等。
💅 有任何问题欢迎私信，看到会及时回复
👤 微信号：stbsl6，微信公众号：苏州程序大白
🎯 想加入技术交流群的可以加我好友，群里会分享学习资料

在这里插入图片描述

介绍

SlidingClock是由Wallpaper engine创意工坊-DarkBlue的作者开发，可做动态桌面壁纸，非常的简约精美，适合收藏。
在这里插入图片描述

css源码

* {
   
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
   
    place-items: center;
}

body {
   
    font-family: monospace;
    font-size: 2rem;
    min-height: 100vh;
    display: grid;
    overflow-y: hidden;
    place-items: center;
    background: linear-gradient(-45deg, #c4d2ef, #dfe6f6);
}

.hr,
.min,
.sec {
   
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3rem;
    grid-row: 1/2;
    align-items: start;
}

.number {
   
    padding: 0.5em;
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    color: #f9fbfd;
    transition: all 500ms 100ms ease;
    border-radius: 50%;
}

.number.pop {
   
    color: #3e6ccb;
    font-weight: bold;
    transform: scale(1.3);
    background-color: #dfe6f6;
    box-shadow: -10px -10px 20px -5px #f9fbfd, 10px 10px 20px #a9bee8;
}

.strip {
   
    transition: transform 500ms ease-in-out;
    border-radius: 8px;
    background-color: #dfe6f6;
    box-shadow: -10px -10px 20px -5px #f9fbfd, 10px 10px 20px #a9bee8;
}

.clock {
   
    display: grid;
    grid-template