论坛 › 动画音画 › 虞兮叹

马黑黑 发表于 2024-5-27 20:11

虞兮叹

<style>
        .papa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 700px; background: url('https://638183.freep.cn/638183/t24/2/yuxi.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #000; overflow: hidden; z-index: 1; position: relative; }
        #aCanv { position: absolute; bottom: 10px; left: calc(50% - 300px); }
        .vid { position: absolute; top: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; transform: rotateX(180deg); mix-blend-mode: screen; }
        .mpic { position: absolute; offset-path: path('M0 200 Q640 20,1280 200'); transform: rotateY(180deg); mix-blend-mode: multiply; offset-distance: 0; animation: fly 8s linear infinite var(--state); }
        @keyframes fly { to { offset-distance: 100%; } }
</style>

<div class="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1479526505" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/68/5b4865ba379a9.mp4" autoplay loop muted></video>
        <img class="mpic" src="https://638183.freep.cn/638183/small/flybirds.gif" alt="" />
        <canvas id="aCanv" width="600" height="320"></canvas>
</div>

<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/canvcircle_lrc.js';
document.body.appendChild(sF);
//播放器颜色设置
//var colors = { track: 'snow', prog: 'purple', btn: 'white', text: 'silver' };
//歌词
var lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
</script>

马黑黑 发表于 2024-5-27 20:12

本帖最后由 马黑黑 于 2024-5-27 21:20 编辑

帖子代码及相关说明：
《虞兮叹》以及canvas圆环播放器 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

南无月 发表于 2024-5-27 20:19

原来视频只有云在飞
飞鸟是GIF图片，给了路径。。{:4_170:}

南无月 发表于 2024-5-27 20:23

{:4_170:}
歌词这个弧度整得，真是漂亮，在这个黑白贴子里，挺亮眼的。
昨天觉得歌词只有标题功能，
整成歌词还是只有黑老师有这样的创意和能耐。。
五体投地一下

南无月 发表于 2024-5-27 20:23

这个小播和歌词直接打包在一起了。
封装好的代码好简洁，看着好懂。。
一点也不吓人了。。{:4_170:}

南无月 发表于 2024-5-27 20:27

问个老师，这歌词不打算给个颜色设置？{:4_173:}

马黑黑 发表于 2024-5-27 20:41

南无月 发表于 2024-5-27 20:27
问个老师，这歌词不打算给个颜色设置？

闪烁挺好的吧

南无月 发表于 2024-5-27 20:44

马黑黑 发表于 2024-5-27 20:41
闪烁挺好的吧

后来去站里看了一会，发现是为了要闪所以颜色有变化。。想通了{:4_170:}

马黑黑 发表于 2024-5-27 21:06

南无月 发表于 2024-5-27 20:44
后来去站里看了一会，发现是为了要闪所以颜色有变化。。想通了

想不通可以继续想

红影 发表于 2024-5-27 21:45

很开阔壮美的场景。素色背景很有历史的苍茫感{:4_199:}

红影 发表于 2024-5-27 21:47

用黑白色衬托彩色弧形歌词，这个构思很棒{:4_199:}

这个有视频，有歌词同步，还有动图路径，内容多多呢{:4_187:}

红影 发表于 2024-5-27 21:47

赶紧去看讲解去。。。

马黑黑 发表于 2024-5-27 22:09

红影 发表于 2024-5-27 21:45
很开阔壮美的场景。素色背景很有历史的苍茫感

{:4_190:}

马黑黑 发表于 2024-5-27 22:09

红影 发表于 2024-5-27 21:47
用黑白色衬托彩色弧形歌词，这个构思很棒

这个有视频，有歌词同步，还有动图路径，内容多多呢{ ...

都是常规的操作

马黑黑 发表于 2024-5-27 22:09

红影 发表于 2024-5-27 21:47
赶紧去看讲解去。。。

喝水{:4_190:}

执著 发表于 2024-5-27 22:31

这个词显示太有创意了！{:4_171:}

马黑黑 发表于 2024-5-27 22:43

执著 发表于 2024-5-27 22:31
这个词显示太有创意了！

晚上好

朵拉 发表于 2024-5-27 22:56

精彩~~{:4_178:}

红影 发表于 2024-5-27 23:13

马黑黑 发表于 2024-5-27 22:09


这个视频的云也很烘托气氛。

红影 发表于 2024-5-27 23:14

马黑黑 发表于 2024-5-27 22:09
都是常规的操作

但是里面这么多好东西，也令人欣喜{:4_187:}

查看完整版本: 虞兮叹