半纸心事

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: -70px 0 0 calc(50% - 593px);
   
4.         display: grid;
   
5.         place-items: center;
   
6.         width: 1024px;
   
7.         height: 640px;
   
8.         background: lightblue url('https://638183.freep.cn/638183/t23/3/008.jpg') no-repeat center/cover;
   
9.         box-shadow: 3px 3px 20px #000;
   
10.         position: relative;
    
11.         z-index: 1;
    
12.         --state: running;
    
13. }
    
14. .play_pic {
    
15.         position: absolute;
    
16.         cursor: pointer;
    
17. }
    
18. .play_pic:nth-of-type(1) {
    
19.         width: 300px;
    
20.         opacity: .8;
    
21.         transform: rotate(145deg);
    
22.         transition: 1.5s;
    
23. }
    
24. .play_pic:nth-of-type(2) {
    
25.         width: 200px;
    
26.         bottom: 10px;
    
27.         right: 10px;
    
28.         animation: rot 10s infinite var(--state);
    
29. }
    
30. .play_pic:nth-of-type(1):hover { opacity: 0; }
    
31. @keyframes rot {
    
32.         to { transform: rotate(1turn); }
    
33. }
    
34. </style>
    
35. 
    
36. <div id="papa">
    
37.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1914628093" autoplay loop></audio>
    
38.         <img class="play_pic" src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" alt="" />
    
39.         <img class="play_pic" src="https://638183.freep.cn/638183/web/svg/sunfl-2.svg" alt="" />
    
40. </div>
    
41. 
    
42. <script>
    
43. 
    
44. let lrcAr = [
    
45.         [1.5,"作词 : 十二兄",1.6],
    
46.         [3.08,"作曲 : 米茶",1.5],
    
47.         [4.55,"编曲 : 李大白/Fsy小诺",1.4],
    
48.         [5.96,"文案故事：闫倩莹",1.6],
    
49.         [7.56,"歌手：国风堂 / 河图",3.9],
    
50.         [14.12,"许是一瞥最惊鸿",2.0],
    
51.         [17.17,"才有你入我眼中",2.0],
    
52.         [19.92,"落笔沾染万里风",1.8],
    
53.         [21.86,"山海风月皆为你动容",3.2],
    
54.         [25.55,"一砚星河蘸笔锋",1.8],
    
55.         [28.18,"万顷星子藏眸中",1.9],
    
56.         [31.07,"世间万物略显平庸",3.7],
    
57.         [36.32,"山与海 在眉目间相拥",2.3],
    
58.         [39.16,"风与月 在回眸中相逢",2.4],
    
59.         [41.89,"纸与墨 在落笔后心动",2.3],
    
60.         [44.19,"一支笔描三分容 已胜万种",2.9],
    
61.         [47.41,"星与辰 在一笑后奔涌",2.4],
    
62.         [50.21,"烟与火 在初见时渐浓",2.4],
    
63.         [53.1,"一纸墨 半纸心事重重",4.4],
    
64.         [81.3,"两袖倚云结清风",1.8],
    
65.         [84.16,"一丈红尘眉目中",1.9],
    
66.         [87.1,"笔过风情胜万种",1.9],
    
67.         [88.97,"风华绝代难绘就一成",3.3],
    
68.         [92.59,"衣袂过处斗芳红",1.7],
    
69.         [95.2,"提笔勾勒花下梦",2.0],
    
70.         [98.02,"收笔难收一面惊鸿",3.7],
    
71.         [103.24,"山与海 在眉目间相拥",2.3],
    
72.         [106.03,"风与月 在回眸中相逢",2.4],
    
73.         [108.91,"纸与墨 在落笔后心动",2.3],
    
74.         [111.19,"一支笔描三分容 已胜万种",2.6],
    
75.         [114.53,"星与辰 在一笑后奔涌",2.2],
    
76.         [117.18,"烟与火 在初见时渐浓",2.5],
    
77.         [120.08,"一纸墨 半纸心事重重",4.5],
    
78.         [147.89,"山与海 在眉目间相拥",2.3],
    
79.         [150.6,"风与月 在回眸中相逢",2.5],
    
80.         [153.52,"纸与墨 在落笔后心动",2.2],
    
81.         [155.88,"一支笔描三分容 已胜万种",3.0],
    
82.         [159.13,"星与辰 在一笑后奔涌",2.3],
    
83.         [161.8,"烟与火 在初见时渐浓",2.5],
    
84.         [164.56,"一纸墨 半纸心事重重",4.8]
    
85. ];
    
86. 
    
87. let loadJs = (url,callback) => {
    
88.         let body = document.querySelector('body'), jsNode = document.createElement('script');
    
89.         jsNode.charset = 'utf-8';
    
90.         jsNode.setAttribute('src', url);
    
91.         body.appendChild(jsNode);
    
92.         jsNode.onload = () => callback();
    
93. };
    
94. 
    
95. loadJs('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
    
96.         HCPlayer({
    
97.                 papa: '#papa',
    
98.                 lrcAr: lrcAr,
    
99.                 lrc_css: 'top: 20px; right: 200px; font-size: 2em;',
    
100.         });
     
101. });
     
102. 
     
103. for(i = 0; i < 6; i++) {
     
104.         let img = document.createElement('img');
     
105.         img.className = 'play_pic';
     
106.         img.alt = '';
     
107.         img.src = 'https://638183.freep.cn/638183/web/svg/sunfl-2.svg';
     
108.         img.style.cssText += `
     
109.                 left: ${i * 10 + 10}px;
     
110.                 top: ${i * 5 + 10}px;
     
111.                 width: ${i * 50 + 50}px;
     
112.                 height: ${i * 50 + 50}px;
     
113.                 filter: opacity(${Math.random() * 0.5 + 0.5}) hue-rotate(${Math.random() * 360}deg);
     
114.                 animation: rot ${Math.random() * 6 + 4}s ${Math.random() * -3}s infinite linear var(--state);
     
115.         `;
     
116.         papa.appendChild(img);
     
117. }
     
118. 
     
119. </script>

复制代码

梦油

新制作层出不穷，佩服，佩服！

红影

彩虹伞和太阳花都是播放器按钮呢，点击都能暂停

红影

nth-of-type(1)这个是彩虹伞吧，鼠标移动上去就变成了透明，让伞后的女子被显示出来

红影

最难的是左上角的6个太阳花，直接用JS画出来的。
又看了看，不是画的，而是直接使用了太阳花的svg图片，对它们重新进行了设置。

红影

太阳花的设置这个太棒了，又是新知识呢

红影

对一张图图可以调整色相、透明度以及位置、大小和动画形态，然后可以生出一堆来。这个好玩

马黑黑

梦油 发表于 2023-11-27 10:23
新制作层出不穷，佩服，佩服！

马黑黑

红影 发表于 2023-11-27 10:42
彩虹伞和太阳花都是播放器按钮呢，点击都能暂停

因为它们都用了 class="play_pic" 属性，这个插件就是这么干的：有一个支持一个

马黑黑

红影 发表于 2023-11-27 10:54
太阳花的设置这个太棒了，又是新知识呢

这是父元素设定的子元素的默认位置

马黑黑

红影 发表于 2023-11-27 10:45
nth-of-type(1)这个是彩虹伞吧，鼠标移动上去就变成了透明，让伞后的女子被显示出来

彩虹伞是第一个代码流里出现的 .play_pic，所以 :nth-of-type(1) 指向它

马黑黑

红影 发表于 2023-11-27 10:52
最难的是左上角的6个太阳花，直接用JS画出来的。
又看了看，不是画的，而是直接使用了太阳花的svg图片，对 ...

JS里，用一个循环语句将多个图片添加到 papa 元素，添加前给它们设置一些基本属性。

马黑黑

红影 发表于 2023-11-27 10:58
对一张图图可以调整色相、透明度以及位置、大小和动画形态，然后可以生出一堆来。这个好玩

这些就是综合运用了

马黑黑

醉美水芙蓉 发表于 2023-11-27 12:02
彩虹伞一点就隐形了，太阳撒花花！

手机看的吧？再点右下角的太阳花，伞就会恢复