东方神韵精选（二）

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/dsfh.jpg') no-repeat center/cover; color: snow; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     #msvg { position: absolute; width: 12vw; heighht: 12vw; top: 20%; right: 16%; opacity: 1; cursor: pointer; }
   
7.     #msvg path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 2s var(--delay) forwards, fill 0.75s calc(var(--delay) + 2s) forwards; }
   
8.     @keyframes draw { to { stroke-dashoffset: 0; } }
   
9.     @keyframes fill { to {fill: url(#grd); } }
   
10. </style>
    
11. 
    
12. <div id="pa" class="pa">
    
13.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/92/5e67af3447155.mp4" autoplay loop muted></video>
    
14.     <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    
15.         <title>播放/暂停(Alt+X)</title>
    
16.         <defs>
    
17.             <linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
    
18.                 <stop offset="0%" stop-color="white"></stop>
    
19.                 <stop offset="50%" stop-color="magenta"></stop>
    
20.                 <stop offset="100" stop-color="red"></stop>
    
21.             </linearGradient>
    
22.         </defs>
    
23.         <g id="g1"></g>
    
24.     </svg>
    
25. </div>
    
26. 
    
27. <script>
    
28.     var options = {
    
29.         pa: '.pa',
    
30.         urls: [
    
31.             ['https://music.163.com/song/media/outer/url?id=5275056', '心神合一-洞箫/中音笙'],
    
32.             ['https://music.163.com/song/media/outer/url?id=5275057', '海上碧波-竹笛/古筝'],
    
33.             ['https://music.163.com/song/media/outer/url?id=5275058', '片片枫叶红-埙/扬琴'],
    
34.             ['https://music.163.com/song/media/outer/url?id=5275059', '思绪-中音笙/二胡'],
    
35.             ['https://music.163.com/song/media/outer/url?id=5275060', '眷恋-二胡/洞箫'],
    
36.             ['https://music.163.com/song/media/outer/url?id=5275061', '月落乌啼-曲笛/扬琴'],
    
37.             ['https://music.163.com/song/media/outer/url?id=5275062', '月光-二胡/中音笙'],
    
38.             ['https://music.163.com/song/media/outer/url?id=5275063', '梦幻-琵琶/女声/二胡'],
    
39.             ['https://music.163.com/song/media/outer/url?id=5275064', '相思对花眠-二胡/中音笙'],
    
40.             ['https://music.163.com/song/media/outer/url?id=5275065', '感悟-女声/二胡/扬琴']
    
41.         ],
    
42.         btns: [msvg]
    
43.     };
    
44. 
    
45.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    
46.         loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    
47.     });
    
48. 
    
49.     function tzRun() {
    
50.         var aud = new AudPlayer(options);
    
51. 
    
52.         var dr = _dr(msvg);
    
53.         dr.path('M0 0 L-40 -190Q0 -100,40 -190 L0 0', 'transparent', 'snow', 3).addTo(g1).rotates(9);
    
54.         setProperties();
    
55. 
    
56.         function setProperties() {
    
57.             const paths = msvg.querySelectorAll('path');
    
58.             paths.forEach((path, idx) => {
    
59.                 path.style.cssText += `
    
60.                     --len: ${path.getTotalLength()};
    
61.                     --delay: ${idx * 2.75}s;
    
62.                 `;
    
63.             });
    
64.             paths[paths.length - 1].onanimationend = () => {
    
65.                 setTimeout(() => { g1.classList.add('rotate'); }, 750);
    
66.             };
    
67.         }
    
68.     }
    
69. 
    
70.     function loadJs(url, callback) {
    
71.         var script = document.createElement('script');
    
72.         script.charset = 'utf-8';
    
73.         script.src = url;
    
74.         script.onload = function() {
    
75.             if (callback) callback();
    
76.         };
    
77.         document.head.appendChild(script);
    
78.     }
    
79. </script>

复制代码

马黑黑

辅助小播的绘制原理和实现方法请移步：


一文讲清 SVG 动态绘图 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!