云端漫步 发表于 2026-7-25 15:00:38

【漫步特效】鼠绘手表北京时间/CSS代码编辑

<style>
#mydiv {
    margin: 160px 0 30px calc(50% - 700px);
    display: grid;
    place-items: center;
    width: 1200px;
    height: 700px;
    background: lightblue url('https://644220.freep.cn/644220/4/tr8.png') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#vid {
    position: absolute;
    width: 130%;
    height: 130%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    mask: linear-gradient(to top right, red 88%, transparent 0);
    -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);
    z-index: 6;
    opacity: .25;
}
#character-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 10;
}
#clock {
    position: absolute;
    top: 52%;
    left: 43%;
    width: 340px;
    height: 340px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 20;
    margin: 0;
    padding: 0;
}
#clock-video {
    position: absolute;
    top: 52%;
    left: 43%;
    width: 366px;
    height: 366px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0.65;
    z-index: 18;
}
#clock-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #222;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 3px rgba(0,0,0,0.6);
    z-index: 30;
}
#hour, #minute, #second {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center bottom;
    transform: translateX(-50%) translateY(-100%) rotate(0deg);
    margin: 0;
    padding: 0;
}
#hour {
    width: 8px;
    height: 26%;
    background: #222;
    border-radius: 4px 4px 0 0;
    z-index: 25;
}
#hour::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid #222;
}
#minute {
    width: 5px;
    height: 42%;
    background: #333;
    border-radius: 3px 3px 0 0;
    z-index: 26;
}
#minute::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 9px solid #333;
}
#second {
    width: 2px;
    height: 48%;
    background: #e63946;
    border-radius: 1px 1px 0 0;
    z-index: 27;
}
#second::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 7px solid #e63946;
}
.clock-number {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 1px 1px 4px #000, 0 0 3px #000;
    transform: rotate(calc(var(--n) * 30deg));
    z-index: 22;
}
.clock-number span {
    display: inline-block;
    transform: rotate(calc(var(--n) * -30deg));
    width: 40px;
    height: 40px;
    line-height: 40px;
}
#time-text {
    display:none;
}
#datetime-show{
    position:absolute;
    top:55px;
    left:62%;
    transform:translateX(-50%);
    font-size:19px;
    color:#fff;
    text-shadow:1px 1px 5px #000,0 0 4px #000;
    z-index:99;
    letter-spacing:1px;
    pointer-events:none;
}
</style>

<div id="mydiv">
    <video id="vid" src="https://img2.tukuppt.com/video_show/2475824/00/07/99/5d149ee9eae95.mp4" autoplay loop muted=""></video>
    <div id="datetime-show">
      <span id="ymd"></span>
      <span id="week0" style="display:none">星期日</span>
      <span id="week1" style="display:none">星期一</span>
      <span id="week2" style="display:none">星期二</span>
      <span id="week3" style="display:none">星期三</span>
      <span id="week4" style="display:none">星期四</span>
      <span id="week5" style="display:none">星期五</span>
      <span id="week6" style="display:none">星期六</span>
      <span id="hms"></span>
    </div>
    <video id="clock-video" src="https://i.uik.cc/view.php/df9367c7a6d088f57975e3f40e158d3a.mp4" autoplay loop></video>
    <div id="clock">
      <div id="clock-center"></div>
      <div class="clock-number" style="--n: 0"><span>12</span></div>
      <div class="clock-number" style="--n: 1"><span>1</span></div>
      <div class="clock-number" style="--n: 2"><span>2</span></div>
      <div class="clock-number" style="--n: 3"><span>3</span></div>
      <div class="clock-number" style="--n: 4"><span>4</span></div>
      <div class="clock-number" style="--n: 5"><span>5</span></div>
      <div class="clock-number" style="--n: 6"><span>6</span></div>
      <div class="clock-number" style="--n: 7"><span>7</span></div>
      <div class="clock-number" style="--n: 8"><span>8</span></div>
      <div class="clock-number" style="--n: 9"><span>9</span></div>
      <div class="clock-number" style="--n: 10"><span>10</span></div>
      <div class="clock-number" style="--n: 11"><span>11</span></div>
      <div id="hour"></div>
      <div id="minute"></div>
      <div id="second"></div>
    </div>
    <audio id="aud" src="https://ting8.yymp3.com/new27/wangyixin//1.mp3" autoplay loop>
    <img id="character-img" src="https://644220.freep.cn/644220/w/1UH.png" alt="">
</div>

<script>
function updateClock() {
    const now = new Date();
    let hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    const w = now.getDay();

    const secondDeg = seconds * 6;
    const minuteDeg = minutes * 6 + seconds * 0.1;
    const hourDeg = (hours % 12) * 30 + minutes * 0.5;

    document.getElementById('hour').style.transform = `translateX(-50%) translateY(-100%) rotate(${hourDeg}deg)`;
    document.getElementById('minute').style.transform = `translateX(-50%) translateY(-100%) rotate(${minuteDeg}deg)`;
    document.getElementById('second').style.transform = `translateX(-50%) translateY(-100%) rotate(${secondDeg}deg)`;

    const year = now.getFullYear();
    const month = String(now.getMonth()+1).padStart(2,'0');
    const day = String(now.getDate()).padStart(2,'0');
    const hh = String(hours).padStart(2,'0');
    const mm = String(minutes).padStart(2,'0');
    const ss = String(seconds).padStart(2,'0');

    document.getElementById('ymd').innerText = year+"年"+month+"月"+day+"日 ";
    document.getElementById('hms').innerText = " "+hh+":"+mm+":"+ss;

    for(let i=0;i<=6;i++){
      document.getElementById('week'+i).style.display = "none";
    }
    document.getElementById('week'+w).style.display = "inline";
}

updateClock();
setInterval(updateClock, 1000);
</script>

云端漫步 发表于 2026-7-25 15:01:02

@素心 在十多年前我曾制作过FLASH多种时钟与手表，记得在云荷也发表过，但现在浏览器不断更新，
现代浏览器不支持FLASH插件，此手表用CSS代码编辑完全支持现代浏览器。

@ 姚云裳

素心 发表于 2026-7-25 19:06:33

还是鼠绘的，漫步同学会的东西可是俱全了，这样的表现形式，还真的是挺独特的，{:1_150:}

素心 发表于 2026-7-25 19:09:41

视频效果放入表里，随着时间的走动，也代表了一个时代的变迁，寓意真好

云端漫步 发表于 2026-7-25 19:52:41

素心 发表于 2026-7-25 19:06
还是鼠绘的，漫步同学会的东西可是俱全了，这样的表现形式，还真的是挺独特的， ...

素心 同学来了哈，呵呵我是图痴，;P业余就爱玩这些，什么JS特效、html特效、CSS特效、FLASH特效,Java特效,插件特效、代码特效等。我喜欢运用各种效果相互配合组成的音画。

绿蔷薇 发表于 2026-7-25 19:53:50

FLASH时钟、手表还有挂种，漫步老师很久以前有发表过，不过帖子都失效了~~

云端漫步 发表于 2026-7-25 19:54:32

素心 发表于 2026-7-25 19:09
视频效果放入表里，随着时间的走动，也代表了一个时代的变迁，寓意真好

说的好，时光缓缓流转，带走旧岁光景，也铺开新的篇章。
岁月更迭便是时代无声的答卷，所有变迁都藏着独属于时光的深意。

云端漫步 发表于 2026-7-25 19:56:44

绿蔷薇 发表于 2026-7-25 19:53
FLASH时钟、手表还有挂种，漫步老师很久以前有发表过，不过帖子都失效了~~

蔷薇好这个表是CSS代码编辑的

绿蔷薇 发表于 2026-7-25 19:58:31

鼠绘手表很逼真，带着金属的质感
视频嵌入手表玻璃面太巧妙了
标题文字编排简约又好看~~~

绿蔷薇 发表于 2026-7-25 19:59:22

云端漫步 发表于 2026-7-25 19:56
蔷薇好这个表是CSS代码编辑的

是哒，所以这帖能看到~~{:1_234:}
页: [1] 2 3 4
查看完整版本: 【漫步特效】鼠绘手表北京时间/CSS代码编辑