论坛 › 动画音画 › 越剧——一点钟

有声有色 发表于 2023-5-29 07:54

越剧——一点钟

本帖最后由 有声有色 于 2023-5-29 09:19 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1901246">

<style>
#papa {margin: 80px 0 0 calc(50% - 681px);width: 1200px;height: 750px;background: tan url('https://pic1.imgdb.cn/item/647301c6f024cca1736ee0f9.gif');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: 0px;
      top: 0px;
      width: 0px;
      height: 0px;
      background: gray url('') -0px -0px;
      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:500px; object-fit: cover; opacity: 1; }
</style>

<div id="papa">
<video class="vid" src="" 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:215px; right: 510px;
                @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: 600px;
                        --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=202463.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></td></tr></table>5

红影 发表于 2023-5-29 10:18

这个制作好，弄了个钟楼呢{:4_187:}

亦是金 发表于 2023-5-29 10:18

制作快速，欣赏学习了！{:4_190:}

红影 发表于 2023-5-29 10:18

唱段也好听。欣赏有声有色老师好帖{:4_187:}

红影 发表于 2023-5-29 10:20

设计很巧妙。唯一的缺陷是背景图太模糊了{:4_173:}

梦缘 发表于 2023-5-29 10:57

感谢老师的钟楼，欣赏好剧。{:4_171:}

有声有色 发表于 2023-5-29 11:38

红影 发表于 2023-5-29 10:18
这个制作好，弄了个钟楼呢

谢谢

有声有色 发表于 2023-5-29 11:39

亦是金 发表于 2023-5-29 10:18
制作快速，欣赏学习了！

没事做在瞎玩，

有声有色 发表于 2023-5-29 11:42

红影 发表于 2023-5-29 10:20
设计很巧妙。唯一的缺陷是背景图太模糊了

背景是外滩一张白天图片，我修改了一下。看来修改的不好，还有这个钟浏览器不一样出来不一样，中间我是扣成园的，但是这里是全白的

有声有色 发表于 2023-5-29 11:43

梦缘 发表于 2023-5-29 10:57
感谢老师的钟楼，欣赏好剧。

谢谢支持

有声有色 发表于 2023-5-29 11:47

本帖最后由 有声有色 于 2023-5-29 11:49 编辑

红影 发表于 2023-5-29 10:20
设计很巧妙。唯一的缺陷是背景图太模糊了


两个浏览器两样图案

小文 发表于 2023-5-29 12:35

持喜欢态度！虽然听不懂！问好！

有声有色 发表于 2023-5-29 12:56

小文 发表于 2023-5-29 12:35
持喜欢态度！虽然听不懂！问好！

谢谢鼓励，这是江浙沪一带的地方戏（越剧）

红影 发表于 2023-5-29 22:47

有声有色 发表于 2023-5-29 11:38
谢谢

很不错，漂亮{:4_187:}

红影 发表于 2023-5-29 22:51

有声有色 发表于 2023-5-29 11:47
两个浏览器两样图案

奇怪，这个代码钟表是有底色的，不可能看到抠图的啊。

红影 发表于 2023-5-29 22:52

有声有色 发表于 2023-5-29 11:42
背景是外滩一张白天图片，我修改了一下。看来修改的不好，还有这个钟浏览器不一样出来不一样，中间我是扣 ...

哦，是背景前面加了个透明图么？

有声有色 发表于 2023-5-30 08:08

红影 发表于 2023-5-29 22:52
哦，是背景前面加了个透明图么？

那为什么在360浏览器不能显示，在搜狗浏览器就能显示

红影 发表于 2023-5-30 16:42

有声有色 发表于 2023-5-30 08:08
那为什么在360浏览器不能显示，在搜狗浏览器就能显示

我也不懂这个，可能不同的浏览器对代码的解析不同吧。

查看完整版本: 越剧——一点钟