幻想

马黑黑

马黑黑

帖子代码：

1. <style>
   
2. #tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 700px; background: url('https://638183.freep.cn/638183/t24/3/1001.jpg') no-repeat center/cover, url('https://638183.freep.cn/638183/t24/webp2/hrxl.webp') no-repeat center/cover, radial-gradient(orange,lightgreen, white, plum); background-blend-mode: difference; border: thick groove gray; position: relative; --state: running; --scale: 1; }
   
3. #tz:fullscreen #hsvg { --scale: 1.8;}
   
4. #hsvg { position: absolute; left: calc(50% - 160px); top: calc(50% - 160px); border-radius: 50%; filter: drop-shadow(0 0 8px green); cursor: pointer; animation: rot 30s linear infinite var(--state); }
   
5. #hsvg:hover { --state: paused; }
   
6. @keyframes rot { from { transform: rotate(0deg) scale(var(--scale)); } to { transform: rotate(360deg) scale(var(--scale)); } }
   
7. </style>
   
8. 
   
9. <div id="tz">
   
10.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=369592" autoplay loop></audio>
    
11.         <svg id="hsvg" width="320" height="320" viewBox="0 0 320 320" fill="none" stroke="plum" stroke-linecap="round"></svg>
    
12. </div>
    
13. 
    
14. <script>
    
15. var sc = document.createElement('script');
    
16. sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
    
17. sc.charset = 'utf-8';
    
18. document.body.appendChild(sc);
    
19. sc.onload = () => FS({papa: '#tz', css: 'bottom: 20px; left: 50%; --fsBg: #eeeeee90; --color: #336699;'});
    
20. drawPolygon = (total) => {
    
21.         var pathstr = '<defs>', usestr = '';
    
22.         Array(total).fill(0).forEach((id,idx) => {
    
23.                 id = idx + 1;
    
24.                 var bstr = idx === 0 ? '0s' : `p1.begin+${idx}s`;
    
25.                 var color = '#' + Math.random().toString(16).substring(2,8) + '9d';
    
26.                 pathstr += `
    
27.                 <path id="r${id}" stroke="${color}">
    
28.                         <animate id="p${id}" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="12s" repeatCount="indefinite" begin="${bstr}"/>
    
29.                         <animate attributeName="stroke-width" values="0;4;4;4;0" dur="12s" repeatCount="indefinite" begin="${bstr}"/>
    
30.                 </path>`;
    
31.                 Array(total).fill(0).forEach((u,k) => {
    
32.                         u = k + 1;
    
33.                         var angle = id % 2 === 0 ? 360 / total * k + 360 / total / 2 : 360 / total * k;
    
34.                         usestr += `<use xlink:href="#r${id}" transform="rotate(${angle} 160 160)"/>`;
    
35.                 });
    
36.         });
    
37.         pathstr += '</defs>';
    
38.         return pathstr + usestr;
    
39. };
    
40. hsvg.innerHTML = drawPolygon(12);
    
41. mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations());
    
42. aud.onplaying = aud.onpause = () => mState();
    
43. hsvg.onclick = (e) => aud.paused ? aud.play() : aud.pause();
    
44. </script>

复制代码

梦江南

老师又出播放器了，好漂亮！

红影

这个svg图片的代码和前面的六边形的那个有些像能，现在变成12边了啊

红影

这个制作背景很神奇，两张图片的融合和渐变，居然有这么奇妙的效果，太美了

红影

小播也好美，如层层绽放的花朵，美妙绝伦

世外桃源

欣赏佳作，感谢分享

世外桃源

中间的动画很玄乎

马黑黑

梦江南 发表于 2024-9-12 13:24
老师又出播放器了，好漂亮！

马黑黑

世外桃源 发表于 2024-9-12 17:39
中间的动画很玄乎

有点看头吧

马黑黑

红影 发表于 2024-9-12 15:52
小播也好美，如层层绽放的花朵，美妙绝伦

谢赞

马黑黑

红影 发表于 2024-9-12 15:46
这个svg图片的代码和前面的六边形的那个有些像能，现在变成12边了啊

前面说过，那个函数实际上支持任意多边形，只是需要做好一些计算。

马黑黑

红影 发表于 2024-9-12 15:51
这个制作背景很神奇，两张图片的融合和渐变，居然有这么奇妙的效果，太美了

css3的背景融合技术还是很神奇的

红影

马黑黑 发表于 2024-9-12 18:34
谢赞

再看仍然惊艳

红影

马黑黑 发表于 2024-9-12 18:35
前面说过，那个函数实际上支持任意多边形，只是需要做好一些计算。

黑黑直接用实例去证明了那个讲解

红影

马黑黑 发表于 2024-9-12 18:36
css3的背景融合技术还是很神奇的

是啊，能得到这么美妙的效果呢

马黑黑

红影 发表于 2024-9-12 20:22
是啊，能得到这么美妙的效果呢

这得益于w3c专家们对色彩的理解

绿叶清舟

看上去想法很多的了

红影

马黑黑 发表于 2024-9-12 20:23
这得益于w3c专家们对色彩的理解

色彩学也是很重要的一门科学。