论坛 › 音乐沙龙 › 《春夜喜雨》（学习黑黑千年之约代码效果）

红影 发表于 2025-7-29 21:48

《春夜喜雨》（学习黑黑千年之约代码效果）

<style>
    @import 'https://638183.freep.cn/638183/web/css/tz01.css';
    #pa { --per: 0%; --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/688718aa58cb8da5c8e7a4ae.jpg') no-repeat center/cover; --ma-bg: url('https://pic1.imgdb.cn/item/6888cd8258cb8da5c8ed9832.png') no-repeat center/cover; }
    #pa::after { content: ''; position: absolute; top: 11%; left: 6%; width: 52%; height: 47%; background: url('https://pic1.imgdb.cn/item/68871a9058cb8da5c8e7a57c.png') no-repeat center/cover; clip-path: polygon(var(--per) 100%, calc(100% - var(--per)) 100%,calc(100% - var(--per)) 0, var(--per) 0); transition: 3s; }
    .title-text { font: bold 40px 'Microsoft YaHei', sans-serif; }
    #ma { left: 26%; top: 22%; }
    #pa:hover { --per: 50%; }
    #btnFs { bottom: 20px; }
</style>

<div id="pa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=472728031" autoplay loop></audio>
    <video class="qk-vid" src="https://video.699pic.com/videos/02/46/38/b_HwVXgZg5QTYW1569024638.mp4" autoplay loop muted></video>
    <div id="ma" class="hue-rotate"></div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(pa, ma);

      const txtAr = '春夜喜雨'.split('');
    let spans = [];
    txtAr.forEach( (t,k) => {
      const s = document.createElement('span');
      s.textContent = t;
      s.className = k === 0 ? 'title-text rotate' : 'title-text';
      s.style.cssText += `right: 70px; top: ${k * 80 + 90}px;`;
      spans.push(s);
      s.onanimationend = () => {
            s.classList.remove('rotate');
            spans[(k+1) % txtAr.length].classList.add('rotate');
      };
      pa.appendChild(s);
    });
</script>

红影 发表于 2025-7-29 21:50

把小播放在小图后面了，反正想去点小播时，正好小图隐去了，谢谢黑黑代码@马黑黑 {:4_187:}

马黑黑 发表于 2025-7-29 22:32

红影 发表于 2025-7-29 21:50
把小播放在小图后面了，反正想去点小播时，正好小图隐去了，谢谢黑黑代码@马黑黑

这个设计也是极其巧妙的

马黑黑 发表于 2025-7-29 22:33

典雅、高端，精致的作品

小文 发表于 2025-7-29 23:02

精美，喜欢！欣赏！问好！{:4_204:}{:4_187:}

杨帆 发表于 2025-7-30 00:28

漂亮！谢谢影子精彩分享{:4_204:}

梦江南 发表于 2025-7-30 09:32

很巧妙的搭配，精彩！{:4_187:}

梦油 发表于 2025-7-30 10:05

标题设计很有想法，《春夜喜雨》四个字引人注目。

红影 发表于 2025-7-30 13:53

马黑黑 发表于 2025-7-29 22:32
这个设计也是极其巧妙的

主要调位置时，它一下子跑到后面去了，感觉还不错，就调整一下小图中的居中就行了{:4_173:}

红影 发表于 2025-7-30 13:55

马黑黑 发表于 2025-7-29 22:33
典雅、高端，精致的作品

谢谢黑黑，就是想试试把面层上的图图变小点和便成简单的往中间裁剪，黑黑的45度裁剪才更难呢{:4_187:}

红影 发表于 2025-7-30 13:56

小文 发表于 2025-7-29 23:02
精美，喜欢！欣赏！问好！

小文那么晚还在啊，感谢小文鼓励{:4_187:}

红影 发表于 2025-7-30 13:57

杨帆 发表于 2025-7-30 00:28
漂亮！谢谢影子精彩分享

杨帆还要晚，都半夜了还在啊{:4_173:}

红影 发表于 2025-7-30 13:57

梦江南 发表于 2025-7-30 09:32
很巧妙的搭配，精彩！

谢谢江南，我就跟在后面学习代码玩呢{:4_173:}

红影 发表于 2025-7-30 13:58

梦油 发表于 2025-7-30 10:05
标题设计很有想法，《春夜喜雨》四个字引人注目。

这个四个旋转字是黑黑代码里的，我只是套用{:4_173:}

杨帆 发表于 2025-7-30 13:59

红影 发表于 2025-7-30 13:57
杨帆还要晚，都半夜了还在啊

呵呵，再晚也要欣赏佳作{:4_171:}

梦江南 发表于 2025-7-30 14:11

红影 发表于 2025-7-30 13:57
谢谢江南，我就跟在后面学习代码玩呢

原以为这幅轴卷画开合是动画，原来是用代码 做出来的，这就厉害了！{:4_187:}

红影 发表于 2025-7-30 14:38

杨帆 发表于 2025-7-30 13:59
呵呵，再晚也要欣赏佳作

谢谢了，佳作称不上，就是跟着玩呢{:4_187:}

红影 发表于 2025-7-30 14:39

梦江南 发表于 2025-7-30 14:11
原以为这幅轴卷画开合是动画，原来是用代码 做出来的，这就厉害了！

这个是自己鼠标可以操控的啊，是代码弄出来的{:4_173:}

小文 发表于 2025-7-30 14:50

红影 发表于 2025-7-30 13:56
小文那么晚还在啊，感谢小文鼓励

恩师客气了！能欣赏恩师图文并茂，很不错的作品，也是很开心的事。{:4_187:}

梦油 发表于 2025-7-30 16:32

红影 发表于 2025-7-30 13:58
这个四个旋转字是黑黑代码里的，我只是套用

用在这里恰到好处。

查看完整版本: 《春夜喜雨》（学习黑黑千年之约代码效果）