追逐

马黑黑

追
逐

马黑黑

源码

1. <style>
   
2. #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; }
   
3. #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; }
   
4. #tit { position: absolute; font: bold 3em sans-serif; color: #ccc; top: 20px; right: 30px; text-shadow: 2px 2px 4px #000; }
   
5. @keyframes rot { to { transform: rotate(1turn); } }
   
6. </style>
   
7. 
   
8. <div id="papa">
   
9.         <span id="tit">追<br>逐</span>
   
10.         <svg id="mplayer" width="360" height="60" style="position: absolute; bottom: 0;">
    
11.                 <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" />
    
12.                 <rect x="50" y="25" rx="6" ry="6" width="0" height="12" stroke="transparnet" fill="url(#bgcolor)" stroke-opacity=".45" id="prog" />
    
13.                 <text x="260" y="31" font-size="14" dominant-baseline="middle" stroke="none" fill="snow" id="audtime">00:00 | 00:00</text>
    
14.                 <circle cx="25" cy="30" r="15" fill="url(#bgcolor)" id="btnplay" style="cursor: pointer;">
    
15.                         <animateTransform attributeName="transform" dur="3s" type="rotate" from="0 25 30" to="360 25 30" repeatCount="indefinite" />
    
16.                 </circle>
    
17.                 <defs>
    
18.                         <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="bgcolor">
    
19.                                 <stop offset="0%" style="stop-color: red; stop-opacity:0.8" />
    
20.                                 <stop offset="100%" style="stop-color: yellow; stop-opacity:0.75" />
    
21.                         </linearGradient>
    
22.                 </defs>
    
23.         </svg>
    
24. </div>
    
25. 
    
26. <script>
    
27. (function() {
    
28.         let mp = { len: track.getAttribute('width')*1, x: track.getAttribute('x')*1 }, aud = new Audio();
    
29.         aud.src = 'https://music.163.com/song/media/outer/url?id=1983240110.mp3';
    
30.         aud.loop = true;
    
31.         aud.autoplay = true;
    
32.         if(aud.paused) mplayer.pauseAnimations();
    
33.         btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
34.         prog.onclick = track.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - mp.x) / mp.len;
    
35.         aud.addEventListener('seeked', () => mState());
    
36.         aud.addEventListener('pause', () => mState());
    
37.         aud.addEventListener('play', () => mState());
    
38.         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);});
    
39.         let mState = () => aud.paused ? mplayer.pauseAnimations() : mplayer.unpauseAnimations();
    
40.         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;}
    
41. })();
    
42. </script>

复制代码

马黑黑

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的长度以计算依据。

马黑黑

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

https://color.oulu.me/

马黑黑

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

马黑黑

最后解释一下太阳光影效果的实现方法：

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

红影

评分用光了，没法评分了，不好意思

红影

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

红影

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

https://color.oulu.me/

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

红影

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

一张GIF图片（下 ...

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

梦油

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

相约爱晚亭

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

马黑黑

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

还行

马黑黑

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

只要心里诚，管它分不分

马黑黑

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

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

马黑黑

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

马黑黑

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

提别提气是啥新词汇？

马黑黑

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