追逐 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2022-10-24 07:11

追逐

马黑黑 发表于 2022-10-24 07:12

源码
<style>
#papa { margin: auto; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t22/webp/chase.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: end center; user-select: none; z-index: 1; }
#papa::before { position: absolute; content: ''; background: url('https://638183.freep.cn/638183/t22/gif/122.gif'); left: 500px; top: 260px; width:200px; height: 200px; border-radius: 50%; mix-blend-mode: screen; animation: rot 5s infinite; }
#tit { position: absolute; font: bold 3em sans-serif; color: #ccc; top: 20px; right: 30px; text-shadow: 2px 2px 4px #000; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
<span id="tit">追<br>逐</span>
<svg id="mplayer" width="360" height="60" style="position: absolute; bottom: 0;">
<rect x="50" y="25" rx="6" ry="6" width="200" height="12" stroke="hsla(280,90%,55%,.45)" fill="hsla(60,100%,100%,.65)" id="track" />
<rect x="50" y="25" rx="6" ry="6" width="0" height="12" stroke="transparnet" fill="url(#bgcolor)" stroke-opacity=".45" id="prog" />
<text x="260" y="31" font-size="14" dominant-baseline="middle" stroke="none" fill="snow" id="audtime">00:00 | 00:00</text>
<circle cx="25" cy="30" r="15" fill="url(#bgcolor)" id="btnplay" style="cursor: pointer;">
<animateTransform attributeName="transform" dur="3s" type="rotate" from="0 25 30" to="360 25 30" repeatCount="indefinite" />
</circle>
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="bgcolor">
<stop offset="0%" style="stop-color: red; stop-opacity:0.8" />
<stop offset="100%" style="stop-color: yellow; stop-opacity:0.75" />
</linearGradient>
</defs>
</svg>
</div>

<script>
(function() {
let mp = { len: track.getAttribute('width')*1, x: track.getAttribute('x')*1 }, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1983240110.mp3';
aud.loop = true;
aud.autoplay = true;
if(aud.paused) mplayer.pauseAnimations();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = track.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - mp.x) / mp.len;
aud.addEventListener('seeked', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('timeupdate', () => {prog.style.setProperty('width', aud.currentTime * mp.len / aud.duration < 6 ? 6 : aud.currentTime * mp.len / aud.duration+ 'px');audtime.textContent = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
let mState = () => aud.paused ? mplayer.pauseAnimations() : mplayer.unpauseAnimations();
let toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
})();
</script>

马黑黑 发表于 2022-10-24 07:27

svg 播放器代码中，

<svg id="mplayer" width="360" height="60" style="position: absolute; bottom: 0;">
<rect x="50" y="25" rx="6" ry="6" width="200" height="12" stroke="hsla(280,90%,55%,.45)" fill="hsla(60,100%,100%,.65)" id="track" />
<rect x="50" y="25" rx="6" ry="6" width="0" height="12" stroke="transparnet" fill="url(#bgcolor)" stroke-opacity=".45" id="prog" />
<text x="260" y="31" font-size="14" dominant-baseline="middle" stroke="none" fill="snow" id="audtime">00:00 | 00:00</text>
<circle cx="25" cy="30" r="15" fill="url(#bgcolor)" id="btnplay" style="cursor: pointer;">
<animateTransform attributeName="transform" dur="3s" type="rotate" from="0 25 30" to="360 25 30" repeatCount="indefinite" />
</circle>
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="bgcolor">
<stop offset="0%" style="stop-color: red; stop-opacity:0.8" />
<stop offset="100%" style="stop-color: yellow; stop-opacity:0.75" />
</linearGradient>
</defs>
</svg>

① id="track" 和 id="prog" 的两个矩形（rect）是进度条组合，track是底轨，prog是进度，它们的颜色组合属性是 stroke（描边）和 fill（填充），不熟悉 hsla(...)颜色体系的可以使用 #ff000、red 等颜色表示法代替；

② id="prog" 的 text 标签是显示播放时间信息的文本标签，颜色请修改 fill="snow" 这里；

③ id="btnplay" 的 circle 标签是按钮，它使用线性渐变颜色，指向 id="bgcolor" 的渐变设定，修改其内的两个style 属性等号后面的响应值即可改变颜色。

其他相关修改，如按钮的大小、进度条的长度，均可尝试。进度条的长度 track 和 prog 要保持一致，JS以track的长度以计算依据。

马黑黑 发表于 2022-10-24 07:29

推荐一个渐变背景效果演示的地址：

https://color.oulu.me/

马黑黑 发表于 2022-10-24 07:30

上面推荐的页面，它给每一种渐变都安了姓名，挺有意思的吧

马黑黑 发表于 2022-10-24 07:34

本帖最后由马黑黑于 2022-10-24 07:44 编辑 <br /><br /><p>最后解释一下太阳光影效果的实现方法：<br><br></p>

<p>一张GIF图片（下左图），放在帖子父框的伪元素做背景图片，伪元素定制尺寸和图片尺寸一致并弄成圆形，设定好位置，用 mix-blend-mode 处理一下背景，加一个旋转动画便可。<br><br></p>

<img src="https://638183.freep.cn/638183/t22/gif/122.gif" alt=""><img src="https://638183.freep.cn/638183/t22/gif/122.gif" alt="" style="border-radius: 50%"> <img src="https://638183.freep.cn/638183/t22/gif/122.gif" alt="" style="border-radius: 50%; animation: rot 4s infinite;" />

红影发表于 2022-10-24 09:32

评分用光了，没法评分了，不好意思{:4_173:}

红影发表于 2022-10-24 09:33

暂时听不了，所以看不到进度效果，但这张底图很漂亮，充满了张力，新周看来提别提气{:4_199:}

红影发表于 2022-10-24 09:35

马黑黑发表于 2022-10-24 07:29
推荐一个渐变背景效果演示的地址：

https://color.oulu.me/

这里的配色好漂亮的，都是喜欢的浅色系。还能复制CSS，真不错啊{:4_187:}

红影发表于 2022-10-24 09:38

马黑黑发表于 2022-10-24 07:34
本帖最后由马黑黑于 2022-10-24 07:44 编辑最后解释一下太阳光影效果的实现方法：

一张GIF图片（下 ...

这个旋转不是匀速转的，貌似间隔一段转一下，很奇特呢{:4_204:}

梦油发表于 2022-10-24 10:43

黑黑朋友上午好！你把太阳的活力表现得淋漓尽致，真精彩。

相约爱晚亭 发表于 2022-10-24 10:51

好帖！还送免费渐变背景图。先收藏！谢谢黑黑老师！

醉美水芙蓉 发表于 2022-10-24 11:39

醉美水芙蓉 发表于 2022-10-24 11:40

马黑黑 发表于 2022-10-24 12:10

醉美水芙蓉发表于 2022-10-24 11:40
渐变背景做音画挺漂亮的！

还行

马黑黑 发表于 2022-10-24 12:11

红影发表于 2022-10-24 09:32
评分用光了，没法评分了，不好意思

只要心里诚，管它分不分{:4_173:}

马黑黑 发表于 2022-10-24 12:12

红影发表于 2022-10-24 09:38
这个旋转不是匀速转的，貌似间隔一段转一下，很奇特呢

animation默认是不匀速的，需要匀速的加 linear

马黑黑 发表于 2022-10-24 12:12

醉美水芙蓉发表于 2022-10-24 11:39
欣赏学习黑黑老师精彩特音画！

{:4_190:}

马黑黑 发表于 2022-10-24 12:13

红影发表于 2022-10-24 09:33
暂时听不了，所以看不到进度效果，但这张底图很漂亮，充满了张力，新周看来提别提气

提别提气是啥新词汇？

马黑黑 发表于 2022-10-24 12:13

相约爱晚亭发表于 2022-10-24 10:51
好帖！还送免费渐变背景图。先收藏！谢谢黑黑老师！

{:4_190:}

页: [1] 2 3 4 5 6

花潮论坛's Archiver

追逐