【斗酒相逢音画-五周年庆】【黑师代码】请不要把我推开 文/心络羽儿 赠/可贝伊人

花简静

花简静

1. <style>
   
2.         #tz {
   
3.                 margin: 140px 0 30px calc(50% - 931px);
   
4.                 width: 1700px;
   
5.                 height: 900px;
   
6.                 background: url('https://642303.freep.cn/642303/tu/1005keb01.webp') no-repeat center/cover;
   
7.                 box-shadow: 0 0 6px rgba(0,0,0,.5);
   
8.                 position: relative;
   
9.                 overflow: hidden;
   
10.         }
    
11.         #tz::before {
    
12.         position: absolute;
    
13.         content: '';
    
14.         top: 0px;
    
15.         width: 1700px;
    
16.         height:900px;
    
17.         background: url('https://642303.freep.cn/642303/tu/rn08.png') no-repeat center/cover;
    
18.         z-index: 5;
    
19. }
    
20.         #vid1 {
    
21.                 position: absolute;
    
22.                 width: 100%;
    
23.                 height: 100%;
    
24.                 object-fit: cover;
    
25.                 mix-blend-mode:luminosity;
    
26.                 pointer-events: none;
    
27.                 opacity: 0.90;
    
28.                 transform: rotateY(180deg);
    
29.                 -webkit-mask: linear-gradient(to bottom,transparent,transparent,red);
    
30. }
    
31.         #vid2 {
    
32.                 position: absolute;
    
33.                 width: 100%;
    
34.                 height: 100%;
    
35.                 object-fit: cover;
    
36.                 mix-blend-mode: screen;
    
37.                 pointer-events: none;
    
38.                 opacity: 0.09;
    
39.                 -webkit-mask: linear-gradient(to bottom,transparent,transparent,red);
    
40. }
    
41.         #player {
    
42.                 position: absolute;
    
43.                 left: calc(50% - 650px);
    
44.                 bottom: 2px;
    
45.                 cursor: pointer;
    
46.                 opacity: 0.90;
    
47.                 z-index: 99;
    
48.                 mix-blend-mode:exclusion;
    
49. }
    
50.         .rect {
    
51.                 fill: none;
    
52.                 stroke: url(#lGd);
    
53.                 stroke-width: 6;
    
54.                 stroke-dasharray: 6;
    
55.                 transform-origin: 50%;
    
56.                 animation-delay: 0s;
    
57.                 animation: change 8s linear infinite var(--state);
    
58. }
    
59.         .rect:nth-child(even) { animation-delay: -1s; }
    
60. @keyframes change {
    
61.                 to { transform: rotate(360deg); stroke-dashoffset: 300; }
    
62. }
    
63. </style>
    
64. 
    
65. <div id="tz">
    
66.         <video id="vid1" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b492fae7af99.mp4" autoplay loop muted></video>
    
67.         <video id="vid2" src="h ttps://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4" autoplay loop muted></video>
    
68.         <svg id="player" width="200" height="200">
    
69.                 <defs>
    
70.                         <linearGradient id="lGd" x1="0" y1="0" x2="0" y2="1">
    
71.                                 <stop offset="0%" stop-color="Peru" />
    
72.                                 <stop offset="25%" stop-color="Tomato" />
    
73.                                 <stop offset="50%" stop-color="white" />
    
74.                                 <stop offset="75%" stop-color="Tomato" />
    
75.                                 <stop offset="100%" stop-color="Peru" />
    
76.                         </linearGradient>
    
77.                 </defs>
    
78.                 <rect class="rect" x="5%" y="5%" width="90%" height="90%" rx="50%"/>
    
79.                 <rect class="rect" x="20%" y="20%" width="60%" height="60%"/>
    
80.                 <rect class="rect" x="30%" y="30%" width="40%" height="40%"/>
    
81.                 <rect class="rect" x="30%" y="30%" width="40%" height="40%"/>
    
82.                 <rect class="rect" x="40%" y="40%" width="20%" height="20%"/>
    
83.                 <rect class="rect" x="40%" y="40%" width="20%" height="20%"/>
    
84.         </svg>
    
85.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=717154" autoplay loop></audio>
    
86. </div>
    
87. 
    
88. <script>
    
89. mState = () => {
    
90.         tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
91.         aud.paused ? vid1.pause() : vid1.play();
    
92.         aud.paused ? vid2.pause() : vid2.play();
    
93. };
    
94. aud.onplaying = aud.onpause = () => mState();
    
95. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
96. </script>

复制代码

花简静

@可贝伊人
在这里看到你很开心，收到你的礼物更是开心。。
你的图文我十分喜欢
做了一个小图，
感谢相识，感谢相遇，
感谢你的热情与友好。。

花简静

花简静

点击转动小播，所有动态即可停止。。

花简静

文字素材：@心络羽儿 《请不要把我推开 TO 可贝伊人》http://dj.fqingy.com/forum.php?m ... &extra=page%3D1
感谢羽儿精彩文字。。

心络羽儿

哇，这海水动效真的很逼真，好看

心络羽儿

人物也扣得很清爽呐，都看不出痕迹

心络羽儿

美美哒图图，祝福伊人宝贝收礼开心

姚云裳

好特别的帖，学习一下，同题音画