论坛 › 音乐沙龙 › Steps

马黑黑 发表于 2024-4-1 22:27

Steps

<style>
        #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 683px; background: url('https://638183.freep.cn/638183/t24/1/steps.jpeg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; z-index: 1; position: relative; }
        #papa::before, #papa::after { content: url('https://638183.freep.cn/638183/small/dolan.png'); position: absolute; left: 480px; z-index: -1; bottom: 80px; transform-origin: 50% 100%; animation: skew .5s infinite alternate var(--state); --scale: 1,1; }
        #papa::after { left: 300px; animation-delay: -.5s; --scale: -1,1; }
        #papa video { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
        #canv { display: block; position: absolute; bottom: -10px; left: calc(50% - 100px); transform: scale(0.75); cursor: pointer; }
        @keyframes skew { from { transform: skew(-1.5deg) scale(var(--scale)); } to { transform: skew(1.5deg) scale(var(--scale)); } }
</style>

<div id="papa">
        <audio src="https://music.163.com/song/media/outer/url?id=4278379" autoplay></audio>
        <video src="https://img.tukuppt.com/video_show/2269348/00/14/10/5e17dd1440f72.mp4" loop muted></video>
        <canvas id="canv" width="200" height="200" ></canvas>
</div>

<script>
(function() {
        let sF = document.createElement('script');
        sF.src = 'https://638183.freep.cn/638183/web/js/canvcircle_prg.js';
        sF.charset = 'utf-8';
        document.body.appendChild(sF);
        btnUrl = 'https://638183.freep.cn/638183/small/4yc.png';
})();
</script>

马黑黑 发表于 2024-4-1 22:28

<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>

<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1">&lt;<span class="tDarkRed">style</span>&gt;</cl-cd>
<cl-cd data-idx="2">&nbsp; &nbsp; #papa { <span class="tBlue">margin:</span> 0 0 0 calc(50% - 593px); <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span> 683px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/1/steps.jpeg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 20px #000; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3">&nbsp; &nbsp; #papa::before, #papa::after { <span class="tBlue">content:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/small/dolan.png'</span>); <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 480px; <span class="tBlue">z-index:</span> -1; <span class="tBlue">bottom:</span> 80px; <span class="tBlue">transform-origin:</span> 50% 100%; <span class="tBlue">animation:</span> skew .5s infinite alternate <span class="tBlue">var</span>(--state); <span class="tBlue">--scale:</span> 1,1; }</cl-cd>
<cl-cd data-idx="4">&nbsp; &nbsp; #papa::after { <span class="tBlue">left:</span> 300px; <span class="tBlue">animation-delay:</span> -.5s; <span class="tBlue">--scale:</span> -1,1; }</cl-cd>
<cl-cd data-idx="5">&nbsp; &nbsp; #papa video { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> calc(100% + 60px); <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> screen; <span class="tBlue">pointer-events:</span> none; }</cl-cd>
<cl-cd data-idx="6">&nbsp; &nbsp; #canv { <span class="tBlue">display:</span> block; <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> -10px; <span class="tBlue">left:</span> calc(50% - 100px); <span class="tBlue">transform:</span> scale(0.75); <span class="tBlue">cursor:</span> pointer; }</cl-cd>
<cl-cd data-idx="7">&nbsp; &nbsp; @keyframes skew { from { <span class="tBlue">transform:</span> skew(-1.5deg) scale(<span class="tBlue">var</span>(--scale)); } to { <span class="tBlue">transform:</span> skew(1.5deg) scale(<span class="tBlue">var</span>(--scale)); } }</cl-cd>
<cl-cd data-idx="8">&lt;<span class="tDarkRed">/style</span>&gt;</cl-cd>
<cl-cd data-idx="9">&nbsp;</cl-cd>
<cl-cd data-idx="10">&lt;<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>&gt;</cl-cd>
<cl-cd data-idx="11">&nbsp; &nbsp; &lt;<span class="tDarkRed">audio</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=4278379"</span> autoplay&gt;&lt;<span class="tDarkRed">/audio</span>&gt;</cl-cd>
<cl-cd data-idx="12">&nbsp; &nbsp; &lt;<span class="tDarkRed">video</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2269348/00/14/10/5e17dd1440f72.mp4"</span> loop muted&gt;&lt;<span class="tDarkRed">/video</span>&gt;</cl-cd>
<cl-cd data-idx="13">&nbsp; &nbsp; &lt;<span class="tDarkRed">canvas</span> <span class="tRed">id</span>=<span class="tMagenta">"canv"</span> width=<span class="tMagenta">"200"</span> height=<span class="tMagenta">"200"</span> &gt;&lt;<span class="tDarkRed">/canvas</span>&gt;</cl-cd>
<cl-cd data-idx="14">&lt;<span class="tDarkRed">/div</span>&gt;</cl-cd>
<cl-cd data-idx="15">&nbsp;</cl-cd>
<cl-cd data-idx="16">&lt;<span class="tDarkRed">script</span>&gt;</cl-cd>
<cl-cd data-idx="17">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="18">&nbsp; &nbsp; <span class="tBlue">let</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="19">&nbsp; &nbsp; sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/canvcircle_prg.js'</span>;</cl-cd>
<cl-cd data-idx="20">&nbsp; &nbsp; sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="21">&nbsp; &nbsp; <span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="22">&nbsp; &nbsp; btnUrl = <span class="tMagenta">'https://638183.freep.cn/638183/small/4yc.png'</span>;</cl-cd>
<cl-cd data-idx="23">})();</cl-cd>
<cl-cd data-idx="24">&lt;<span class="tDarkRed">/script</span>&gt;</cl-cd>
</div>

马黑黑 发表于 2024-4-1 22:35

canvcircle_prg.js 约定：

canvas画布必须有，严格按 13 行代码那样写；

帖子标签不论，组织好结构就成；

audio音频标签得有，不需要id，程序认页面中出现的第一个；

video视频标签可有可无，无需id；

播放控制器里的图片，通过 22 行设定，btnUrl 变量不能改。如果没有 22 行代码也行，图片将使用默认的 .svg 格式的四叶草。

【注】如果 JS 文档存在自己的空间，建议修改图片引用地址，以保证媒体资源长期有效。

南无月 发表于 2024-4-1 22:35

已测，完美循环。。{:4_170:}

红影 发表于 2024-4-1 22:35

这个画布进度条是可以手控进度的，而且是打包好的呢。{:4_199:}

红影 发表于 2024-4-1 22:36

这个的对称小人的动态真有趣{:4_187:}

马黑黑 发表于 2024-4-1 22:36

红影 发表于 2024-4-1 22:36
这个的对称小人的动态真有趣

{:4_190:}

南无月 发表于 2024-4-1 22:38

这个画布直接封装了？代码少少的，太好用了吧。{:4_173:}

马黑黑 发表于 2024-4-1 22:39

南无月 发表于 2024-4-1 22:38
这个画布直接封装了？代码少少的，太好用了吧。

做帖子的代码少，JS资源也不多，就几十行

小辣椒 发表于 2024-4-1 22:40

这个播放器有外圆进度条的{:4_199:}

马黑黑 发表于 2024-4-1 22:41

小辣椒 发表于 2024-4-1 22:40
这个播放器有外圆进度条的

这类之前有的，svg的，现在是画布的，画布的比较难做

小辣椒 发表于 2024-4-1 22:45

马黑黑 发表于 2024-4-1 22:41
这类之前有的，svg的，现在是画布的，画布的比较难做

很难做啊，那我肯定有不会了

马黑黑 发表于 2024-4-1 22:45

小辣椒 发表于 2024-4-1 22:45
很难做啊，那我肯定有不会了

用现成的总会的

小辣椒 发表于 2024-4-1 22:48

马黑黑 发表于 2024-4-1 22:45
用现成的总会的

套用应该可以的{:4_170:}

马黑黑 发表于 2024-4-1 22:50

小辣椒 发表于 2024-4-1 22:48
套用应该可以的

核心实现机制不是人人可以编写的，懂得如何去使用就好。详细情况可以研究一下代码，有些工作还是要自己做的，比如CSS、HTML、帖子构思等等，具体要求看看板凳

小辣椒 发表于 2024-4-1 22:51

马黑黑 发表于 2024-4-1 22:50
核心实现机制不是人人可以编写的，懂得如何去使用就好。详细情况可以研究一下代码，有些工作还是要自己做 ...

好的，已经看了，准备下了，今天太迟了

晚安

马黑黑 发表于 2024-4-1 22:54

小辣椒 发表于 2024-4-1 22:51
好的，已经看了，准备下了，今天太迟了

晚安

88

南无月 发表于 2024-4-1 22:59

马黑黑 发表于 2024-4-1 22:39
做帖子的代码少，JS资源也不多，就几十行

对视频的控制也一并封进去了。用了JS真是好简洁。。{:4_173:}

南无月 发表于 2024-4-1 23:00

这些人在台阶上开音乐会，还有阳光照着。。。
老师你这构思和创意真是独特哈。。

马黑黑 发表于 2024-4-1 23:40

南无月 发表于 2024-4-1 23:00
这些人在台阶上开音乐会，还有阳光照着。。。
老师你这构思和创意真是独特哈。。

嗯，胡思乱想的

查看完整版本: Steps