【斗酒相逢音画-五周年庆】【黑师代码】许你一味芬芳 文/心络羽儿 赠/心络羽儿

花简静

花简静

1. <style>
   
2. #dbox {
   
3.         margin: 130px 0 30px calc(50% - 931px);
   
4.         width: 1700px;
   
5.         height: 900px;
   
6.         background: url('https://642303.freep.cn/642303/tu/20240930xlye.webp') no-repeat center/cover;
   
7.         box-shadow: 4px 4px 16px #00000080;
   
8.     overflow: hidden;
   
9.         position: relative;
   
10. }
    
11. #player {
    
12.         position: absolute;
    
13.         width: 130px;
    
14.         height: 130px;
    
15.         left: calc(50% + 480px);
    
16.         top: calc(50% - 120px);
    
17.         cursor: pointer;
    
18.         display: grid;
    
19.         place-items: center;
    
20.         filter: drop-shadow(1px 1px 0 #000);
    
21.         animation: rot linear 10s infinite var(--state);
    
22. }
    
23. #player::before {
    
24.         position: absolute;
    
25.         content: '';
    
26.         width: 15px;
    
27.         height: 15px;
    
28.         border-radius: 50%;
    
29.         background: plum;
    
30. }
    
31. 
    
32. #vid {position: absolute;  width: 100%; height: 100%;mix-blend-mode:screen;left:-100px;opacity: 0.59; -webkit-mask: linear-gradient(to right top, red 5%, transparent 85%, transparent);
    
33. }
    
34. @keyframes rot { to { transform: rotate(360deg); } }
    
35. </style>
    
36. 
    
37. <div id="dbox">
    
38.         <video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8fa5f0765.mp4" autoplay loop muted></video>
    
39.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1466626521" autoplay loop></audio>
    
40.         <svg id="bsvg" width="1700" height="900">
    
41.                 <rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="#60949090" stroke-width="8" stroke-dasharray="8 4">
    
42.                         <animate attributeName="stroke-dashoffset" from="0" to="-48" dur="2s" begin="0s" repeatCount="indefinite"/>
    
43.                 </rect>
    
44.         </svg>
    
45.         <div id="player"></div>
    
46. </div>
    
47. 
    
48. <script>
    
49. mState = () => {
    
50.         dbox.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
51.         aud.paused ? bsvg.pauseAnimations() : bsvg.unpauseAnimations();
    
52.         player.title = aud.paused ? '点击播放' : '点击暂停';
    
53.         aud.paused ? vid.pause() : vid.play();
    
54.        
    
55. }
    
56. mkParticles = (circles, columns, target) => {
    
57.         let size = Math.floor(target.clientWidth / 2 / circles - 10);
    
58.         for(let i = 0; i < circles; i ++) {
    
59.                 let distance = i * (size + 5) + size + 10;
    
60.                 for(let k = 0; k < columns; k ++) {
    
61.                         let angle =  360 / columns * k;
    
62.                         let span = document.createElement('span');
    
63.                         span.style.cssText += `
    
64.                                 position: absolute;
    
65.                                 width: ${size}px;
    
66.                                 height: ${size}px;
    
67.                                 background: #${Math.random().toString(16).substring(2,8)};
    
68.                                 border-radius: 100% 80%;
    
69.                                 transform: rotate(${angle}deg) translate(${distance}px);
    
70.                         `;
    
71.                         target.appendChild(span);
    
72.                 }
    
73.         }
    
74. };
    
75. aud.onplaying = aud.onpause = () => mState();
    
76. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
77. mkParticles(4,9,player);
    
78. </script>

复制代码

青依

哇，静静宝宝美图图，赞了赞了爱了

青依

画面质感，光色极美，动画加的精彩。喜欢呢，羽儿宝宝收礼开心快乐

花简静

感@心络羽儿 提供的文字素材，感谢@青依提供的图片素格，有你们真是太好了。。

青依

祝福两枚宝宝玩耍快乐，小酒窝五周年快乐冲鸭冲鸭冲鸭

花简静

青依 发表于 2024-9-30 15:38
哇，静静宝宝美图图，赞了赞了爱了

太喜欢你的图和你提供的素材了，这一张很美 。。

花简静

青依 发表于 2024-9-30 15:39
画面质感，光色极美，动画加的精彩。喜欢呢，羽儿宝宝收礼开心快乐

依依你来了，抱一个，看到你嘴角就上扬，开心得很

青依

花简静 发表于 2024-9-30 15:41
太喜欢你的图和你提供的素材了，这一张很美 。。

你的也好看喜欢呢。。么么哒

花简静

青依 发表于 2024-9-30 15:41
祝福两枚宝宝玩耍快乐，小酒窝五周年快乐冲鸭冲鸭冲鸭

依依国庆节一起快乐，小酒窝五周年快乐。。