王小赛 - 一生所爱 - 音乐沙龙 - 花潮论坛

马黑黑 发表于 2024-5-3 10:35

王小赛 - 一生所爱

本帖最后由马黑黑于 2024-5-3 10:38 编辑 <style>
#papa { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/u02.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; }
#player { position: absolute; width: 200px; left: calc(50% - 100px); top: calc(50% - 100px); cursor: pointer; pointer-events: auto; animation: rot 6s linear infinite var(--state); }
#canv { position: absolute; display: block; mix-blend-mode: screen; pointer-events: none; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 100px); object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=461855254" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4" loop muted></video>
<canvas id="canv"></canvas>
<img id="player" src="https://638183.freep.cn/638183/t24/leaf/9l.png" alt="" />
</div>

<script>
var pa = papa;
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/emmiter.js';
sF.charset = 'utf-8';
document.body.appendChild(sF);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-5-3 10:36

本帖最后由马黑黑于 2024-5-3 10:37 编辑 <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"><style></cl-cd>
<cl-cd data-idx="2">#papa { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/u02.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; }</cl-cd>
<cl-cd data-idx="3">#player { position: absolute; width: 200px; left: calc(50% - 100px); top: calc(50% - 100px); cursor: pointer; pointer-events: auto; animation: rot 6s linear infinite var(--state); }</cl-cd>
<cl-cd data-idx="4">/* 画布样式 */</cl-cd>
<cl-cd data-idx="5">#canv { position: absolute; display: block; mix-blend-mode: screen; pointer-events: none; }</cl-cd>
<cl-cd data-idx="6">/* 视频样式 */</cl-cd>
<cl-cd data-idx="7">.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 100px); object-fit: cover; pointer-events: none; mix-blend-mode: screen; }</cl-cd>
<cl-cd data-idx="8">@keyframes rot { to { transform: rotate(360deg); } }</cl-cd>
<cl-cd data-idx="9"></style></cl-cd>
<cl-cd data-idx="10"> </cl-cd>
<cl-cd data-idx="11"><div id="papa"></cl-cd>
<cl-cd data-idx="12">    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=461855254" autoplay loop></audio></cl-cd>
<cl-cd data-idx="13">    </cl-cd>
<cl-cd data-idx="14">    <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4" loop muted></video></cl-cd>
<cl-cd data-idx="15">    </cl-cd>
<cl-cd data-idx="16">    <canvas id="canv"></canvas></cl-cd>
<cl-cd data-idx="17">    <img id="player" src="https://638183.freep.cn/638183/t24/leaf/9l.png" alt="" /></cl-cd>
<cl-cd data-idx="18"></div></cl-cd>
<cl-cd data-idx="19"> </cl-cd>
<cl-cd data-idx="20"><script></cl-cd>
<cl-cd data-idx="21">    var pa = papa; //指定帖子元素id</cl-cd>
<cl-cd data-idx="22">    //加载粒子特效资源</cl-cd>
<cl-cd data-idx="23">    var sF = document.createElement('script');</cl-cd>
<cl-cd data-idx="24">    sF.src = 'https://638183.freep.cn/638183/web/js/emmiter.js';</cl-cd>
<cl-cd data-idx="25">    sF.charset = 'utf-8';</cl-cd>
<cl-cd data-idx="26">    document.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="27">    //播放按钮点击事件</cl-cd>
<cl-cd data-idx="28">    player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="29"></script></cl-cd>
</div>

南无月 发表于 2024-5-3 11:26

今天有新贴，我来瞧瞧说明。。{:4_173:}

南无月 发表于 2024-5-3 11:37

新的粒子，每个粒子带渐变效果，
旋转的流星雨一样，效果独特。。
贴子图片背景和视频效果都呈现出柔美的梦幻效果。。{:4_199:}

南无月 发表于 2024-5-3 11:43

封好的粒子效果。。
最近的贴子都可以多个视频支持。。
这些对小白来说都太友好了。{:4_173:}

朵拉发表于 2024-5-3 11:49

梦回大话西游~~

朵拉发表于 2024-5-3 11:50

好听好看学习了{:4_190:}

红影发表于 2024-5-3 13:05

这样一生所爱，横跨宇宙呢，真够伟大的{:4_187:}

红影发表于 2024-5-3 13:07

这样的粒子效果好奇妙，仿佛在呵护着播放器按钮的转动似的。
还有这样奇妙的运动轨迹的啊{:4_199:}

红影发表于 2024-5-3 13:11

这视频也选得很奇妙，开始以为烟雾里散出的星星点点是粒子带来的，原来是视频里的{:4_173:}

马黑黑 发表于 2024-5-3 16:39

南无月发表于 2024-5-3 11:26
今天有新贴，我来瞧瞧说明。。

说明很简单

马黑黑 发表于 2024-5-3 16:39

红影发表于 2024-5-3 13:11
这视频也选得很奇妙，开始以为烟雾里散出的星星点点是粒子带来的，原来是视频里的

是的

马黑黑 发表于 2024-5-3 16:39

红影发表于 2024-5-3 13:07
这样的粒子效果好奇妙，仿佛在呵护着播放器按钮的转动似的。
还有这样奇妙的运动轨迹的啊

想有就有

马黑黑 发表于 2024-5-3 16:39

红影发表于 2024-5-3 13:05
这样一生所爱，横跨宇宙呢，真够伟大的

还行

马黑黑 发表于 2024-5-3 16:42

南无月发表于 2024-5-3 11:37
新的粒子，每个粒子带渐变效果，
旋转的流星雨一样，效果独特。。
贴子图片背景和视频效果都呈现出柔美的 ...

粒子的拖尾效果通过填充带透明的黑色而成，很快背景就变黑了，所以用 mix-blend-mode 处理一下。canvas中的拖尾还有全局透明的做法，有空我查查资料看看怎么弄才更好

马黑黑 发表于 2024-5-3 16:43

南无月发表于 2024-5-3 11:43
封好的粒子效果。。
最近的贴子都可以多个视频支持。。
这些对小白来说都太友好了。

管控视频的暂停播放简单的

马黑黑 发表于 2024-5-3 16:43

朵拉发表于 2024-5-3 11:50
好听好看学习了

{:4_191:}

马黑黑 发表于 2024-5-3 16:43

朵拉发表于 2024-5-3 11:49
梦回大话西游~~

{:4_189:}

南无月 发表于 2024-5-3 16:45

马黑黑发表于 2024-5-3 16:43
管控视频的暂停播放简单的

会者不难，都是简单。。
我传图试贴里第一页的啥都不动的，辛苦老师给瞧一眼好不。。{:4_170:}

梦油发表于 2024-5-3 16:46

设计得真妙，大有梦幻的感觉。

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

王小赛 - 一生所爱