论坛 › 欢乐水吧 › 《周末》（学习黑黑时钟效果）

红影 发表于 2023-5-27 16:46

《周末》（学习黑黑时钟效果）

<style>
#papa {margin: 80px 0 0 calc(50% - 681px);width: 1200px;height: 750px;background: tan url('https://pic1.imgdb.cn/item/6471ae2ff024cca173f034ab.jpg');box-shadow: 0 0 8px #000;display: grid;place-items: center;position: relative;--state: paused;}
css-doodle{position: absolute;}
#papa::before {
      position: absolute;
      content: '';
      pointer-events: auto;
      left: 368px;
      top: 470px;
      width: 206px;
      height: 133px;
      background: gray url('https://pic1.imgdb.cn/item/6471ae2ff024cca173f034ab.jpg') -368px -470px;
      border-radius: 50%;
      cursor: pointer;
      animation: scale .6s infinite alternate var(--state);
}
@keyframes scale { to { transform: scale(1.1) skew(-3deg); } }
.vid { position: absolute; width: 490px; height: 240px; left: 400px; top:200px; object-fit: cover; opacity: 1; }
</style>

<div id="papa">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/d3bd4a5faa02bef0c5a3476b0931e9da_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<css-doodle grid="1x1" id="mplayer">
:doodle{ @size: 80px;   top: 30px;
        z-index: 40;
        clip-path: @shape(
        fill: evenodd;
        points: 200;
        scale: .6;
        r: cos(5t)^2 + sin(5t) + .3;);
        background: snow;
        cursor: pointer;
        animation: rot 4s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }</css-doodle>

<css-doodle grid="4" id="myClock">
      :doodle {
        top: 100px; right: 50px;
                @size: 200px;
                border: 10px solid SaddleBrown;
                border-radius: 50%;
                background: Linen @doodle( /* 刻度 */
                        :doodle { @grid: 1x60 / 100%; }
                        @size: 3px;
                        @place: center;
                        @shape: circle;
                        background: DarkSlateGray;
                        transform: rotate(calc(@i * 6deg)) translate(90px);
                ) no-repeat;
                --sDeg: 0deg; --mDeg: 0deg; --hDeg: 0deg;
      }
      @place: center;
      transform-origin: 50% 100%;
      @match(i ≤ 12) { /* 钟点数 */
                :before { content: '@pn(4,5,6,7,8,9,10,11,12,1,2,3)'; }
                transform: rotate(calc(@i * 30deg)) translate(78px) rotate(calc(@i * -30deg));
      }
      @nth(13) { /* 时针 */
                @size: 6px 60px;
                @place: 50% 32.5%;
                background: linear-gradient(snow,SaddleBrown);
                transform: rotate(var(--hDeg));
      }
      @nth(14) {/* 分针 */
                @size: 4px 80px;
                @place: 50% 27.5%;
                background: linear-gradient(tan,SaddleBrown);
                transform: rotate(var(--mDeg));
      }
      @nth(15) { /* 秒针 */
                @size: 2px 90px;
                @place: 50% 25%;
                background: linear-gradient(white,SaddleBrown);
                transform: rotate(var(--sDeg));
      }
      @nth(16) { /* 针帽 */
                @size: 18px;
                @shape: circle;
                background: radial-gradient(Peru,Tan);
      }

</css-doodle>
<p><br><br><br><br></p>
        <css-doodle id="lrc">
                :doodle {
                        @size: auto 4em;
                        top: 100px;
                        --geci: "花潮lrc在线"; --motion: cover2; --tt: 1s;
                }
                /* 单元格两个伪元素显示lrc歌词 */
                display: grid;
                place-items: center start;
                :before, :after {
                        content: var(--geci);
                        color: snow; /* 歌词底色 */
                        font: bold 2em sans-serif;
                        text-shadow: 1px 1px 2px #000;
                        white-space: pre;
               }
                :after {
                        position: absolute;
                        width: 0;
                        color: Sienna; /* 同步歌词颜色 */
                        overflow: hidden;
                        animation: var(--motion) var(--tt) linear forwards var(--state);
                }
                @keyframes cover1 { from { width: 0; } to { width: 100%; } }
                @keyframes cover2 { from { width: 0; } to { width: 100%; } }
        </css-doodle>
<css-doodle grid="16" id="fFloat">
        :doodle {
                @size: 1200px 750px;
                --state:paused;
        }
        position: absolute;
        left: @r(255)%;
        top: -10%;
        :after {
                position: absolute;
                content: '@p(周末,♪,休闲,♫,♯,快乐,♮,♩,♬,☺,✲,❄)';
                color: snow;
                font-size: @r(6, 24)px;
        }
        animation: fall 40s @r(-6, 36)s infinite var(--state);
        @keyframes fall {
                from { transform: rotate(0deg) translate(0px); }
                to { transform: rotate(@r(-60,60)deg) translate(-1500px); }
        }
</css-doodle>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=232775.mp3" autoplay loop></audio>

</div>

<script>
(function() {
      let vid = document.querySelector('.vid');
        let script = document.createElement('script');
        script.src = '/css-doodle.min.js';
        document.head.appendChild(script);

(function godPush() {
                let now = new Date();
                let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
                        min = now.getMinutes(),
                        sec = now.getSeconds(),
                        msec = now.getMilliseconds();
                let hDeg = hr * 30 + (min * 6 / 12),
                        mDeg = min * 6 + (sec * 6 / 60),
                        sDeg = sec * 6 + (msec * 0.36 / 1000);
                myClock.style.setProperty('--hDeg', hDeg + 'deg');
                myClock.style.setProperty('--mDeg', mDeg + 'deg');
                myClock.style.setProperty('--sDeg', sDeg + 'deg');
                setTimeout(godPush,1000);
      })();
        let slip = 0.1, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
        let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
       
        let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        let mState = () => aud.paused ? ( papa.style.setProperty('--state', 'paused'),fFloat.style.setProperty('--state', 'paused'), vid.pause()) : ( papa.style.setProperty('--state','running'),fFloat.style.setProperty('--state', 'running'), vid.play());
        let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`);});
        mplayer.onclick = () => {if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();if(clickIdx === 2) aud.currentTime = progChg;};
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();

})();
</script>

红影 发表于 2023-5-27 16:48

休息天有空闲时间，也不管提醒了，赶紧去做个帖子学习一下。感谢黑黑的代码{:4_187:}

红影 发表于 2023-5-27 16:51

学了一下时钟，也去复习一下一种迷糊的css图片精灵相关知识。那个水果本来是另找的图，还特地合在图片里，就是为了用精灵再把它找出来。时钟的颜色调了一下，还学习了一下暂停时让所有动的都停下来。当然，时钟是不能停也不可以停的{:4_173:}

红影 发表于 2023-5-27 16:52

请教一下黑黑，播放器按钮怎么好像特别不容易点到啊？@马黑黑

红影 发表于 2023-5-27 16:54

哦，忽然想起来一个地方好像错了？关于打包那块。不过好像帖子正常，不管了{:4_173:}

醉美水芙蓉 发表于 2023-5-27 17:00

梦缘 发表于 2023-5-27 17:18

好漂亮的客厅啊，感谢分享！{:4_204:}

梦油 发表于 2023-5-27 18:04

走时准确的时钟真好。

红影 发表于 2023-5-27 19:54

醉美水芙蓉 发表于 2023-5-27 17:00
很漂亮，欣赏红影美贴！

谢谢水芙蓉美女鼓励{:4_187:}

红影 发表于 2023-5-27 19:55

梦缘 发表于 2023-5-27 17:18
好漂亮的客厅啊，感谢分享！

主要为了加黑黑的那个时钟的{:4_173:}

红影 发表于 2023-5-27 19:56

梦油 发表于 2023-5-27 18:04
走时准确的时钟真好。

是啊，看着帖子就知道当前时间{:4_173:}

梦油 发表于 2023-5-27 20:27

红影 发表于 2023-5-27 19:56
是啊，看着帖子就知道当前时间

我前几年试图加在签名里，始终未能成功。

南无月 发表于 2023-5-27 21:33

影子速度一流，贴子质量一流，色彩搭得十分素雅，代码运用熟练，动画控制能力强。{:4_187:}全方位好贴

马黑黑 发表于 2023-5-27 21:38

红影 发表于 2023-5-27 16:52
请教一下黑黑，播放器按钮怎么好像特别不容易点到啊？@马黑黑

css-doodle元素的形状，基本上以 clip-path 实现，被切割掉的地方，都不接受交互操作。故此，建议整个css-doodle图案都弄成播放器控制器，而不是剥夺它们的点击权限。

红影 发表于 2023-5-27 21:48

梦油 发表于 2023-5-27 20:27
我前几年试图加在签名里，始终未能成功。

这个是代码，签名里只能加图片呢。

红影 发表于 2023-5-27 21:49

南无月 发表于 2023-5-27 21:33
影子速度一流，贴子质量一流，色彩搭得十分素雅，代码运用熟练，动画控制能力强。全方位好贴

呵呵，月儿谬赞了，其实也是套用而已呢{:4_204:}

南无月 发表于 2023-5-27 21:51

红影 发表于 2023-5-27 21:49
呵呵，月儿谬赞了，其实也是套用而已呢

影子用得十分得当{:4_187:}

红影 发表于 2023-5-27 21:52

马黑黑 发表于 2023-5-27 21:38
css-doodle元素的形状，基本上以 clip-path 实现，被切割掉的地方，都不接受交互操作。故此，建议整个css ...

嗯嗯，那么“整个css-doodle图案都弄成播放器控制器”，这个怎么弄啊{:4_190:}

红影 发表于 2023-5-27 22:11

南无月 发表于 2023-5-27 21:51
影子用得十分得当

帖子里弄了点水果，月儿请吃{:4_173:}

马黑黑 发表于 2023-5-27 22:31

红影 发表于 2023-5-27 21:52
嗯嗯，那么“整个css-doodle图案都弄成播放器控制器”，这个怎么弄啊

这个就是不弄呀

查看完整版本: 《周末》（学习黑黑时钟效果）