Rebirth（重生）

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 681px);
   
4.         width: 1200px;
   
5.         height: 777px;
   
6.         background: url('https://638183.freep.cn/638183/t24/webp/rebirth.webp') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         overflow: hidden;
   
9.         z-index: 1;
   
10.         display: grid;
    
11.         place-items: center;
    
12.         position: relative;
    
13. }
    
14. #player {
    
15.         position: absolute;
    
16.         width: 300px;
    
17.         height: 300px;
    
18.         cursor: pointer;
    
19.         filter: opacity(.75) hue-rotate(270deg);
    
20.         background: url('https://638183.freep.cn/638183/t24/jpg/hofghl.jpg') repeat -300px 0 / cover;
    
21.         mask: url('https://638183.freep.cn/638183/web/svg/heart.svg') no-repeat center/cover;
    
22.         -webkit-mask: url('https://638183.freep.cn/638183/web/svg/heart.svg') no-repeat center/cover;
    
23.         animation: rot 10s infinite linear var(--state), bgmov 8s infinite linear var(--state);
    
24. }
    
25. li-zi {
    
26.         position: absolute;
    
27.         width: 15px;
    
28.         height: 15px;
    
29.         border-radius: 50%;
    
30.         background: snow;
    
31.         opacity: .95;
    
32.         animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
    
33. }
    
34. @keyframes moving {
    
35.         from { transform: translate(var(--x0),var(--y0)); opacity: 1; }
    
36.         to { transform: translate(var(--x1),var(--y1)); opacity: .5; }
    
37. }
    
38. @keyframes rot { to { transform: rotate(1turn); } }
    
39. @keyframes bgmov { to { background-position: 0 0; } }
    
40. </style>
    
41. 
    
42. <div id="papa">
    
43.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1399232091" autoplay loop></audio>
    
44.         <div id="player"></div>
    
45. </div>
    
46. 
    
47. <script>
    
48. (function() {
    
49.         let all = 60;
    
50.         for(let i = 0; i < all; i++) {
    
51.                 let lz = document.createElement('li-zi');
    
52.                 let hudu = Math.PI / 180 * 360 / all * i;
    
53.                 let xx = 800 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
    
54.                 lz.style.cssText += `
    
55.                         --x0: ${xx}px;
    
56.                         --y0: ${yy}px;
    
57.                         background: #${Math.random().toString(16).substr(-6)};
    
58.                         animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
    
59.                 `;
    
60.                 papa.prepend(lz);
    
61.         }
    
62.         let mState = () => {
    
63.                 papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
64.         };
    
65.         aud.addEventListener('playing', mState, false);
    
66.         aud.addEventListener('pause', mState, false);
    
67.         player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
68. })();
    
69. </script>

复制代码

朵拉

耐看，慢慢学习哈~~

樵歌

美得令人肝颤！下一世，等你

马黑黑

樵歌 发表于 2024-1-14 20:48
美得令人肝颤！下一世，等你

墙裂支持

马黑黑

醉美水芙蓉 发表于 2024-1-14 20:38
欣赏黑黑老师精彩特效！花心很漂亮！

晚上好

马黑黑

朵拉 发表于 2024-1-14 20:41
耐看，慢慢学习哈~~

樵歌

马黑黑 发表于 2024-1-14 20:53
墙裂支持

开个玩笑，君子不夺人所好

马黑黑

樵歌 发表于 2024-1-14 21:16
开个玩笑，君子不夺人所好

意志不坚定

红影

做量个动态，就能让遮罩和背景错位移动了？我前面想想让背景水平移动，结果全跑了

红影

哦，是定位的关系，背景之前先移了个位置，遮罩没有。应该是这原因吧

红影

凤凰重生，寓意好美

马黑黑

红影 发表于 2024-1-14 22:54
做量个动态，就能让遮罩和背景错位移动了？我前面想想让背景水平移动，结果全跑了

这个要控制好尺寸。下回我做个介绍，一张背景图怎样无缝移动。

马黑黑

红影 发表于 2024-1-14 23:01
凤凰重生，寓意好美

这是帖意，谢谢认同

红影

马黑黑 发表于 2024-1-14 23:14
这个要控制好尺寸。下回我做个介绍，一张背景图怎样无缝移动。

嗯嗯，太好了

红影

马黑黑 发表于 2024-1-14 23:15
这是帖意，谢谢认同

还好我看出来了，开心

庶民

大气。

马黑黑

庶民 发表于 2024-1-15 09:15
大气。

上午好

马黑黑

红影 发表于 2024-1-14 23:49
还好我看出来了，开心

能够准确理解帖意，的确令人开心