【云画】笑傲江湖——（赠 令狐冲）

云笛

云笛

代码：

1. <div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_342895">
   
2. <style>
   
3. #mydiv {
   
4.         margin: 130px 0 30px calc(50% - 881px);
   
5.         width: 1600px;
   
6.         height: 900px;
   
7.         background: url('https://img.wyc520.com.cn/data/attachment/forum/202407/27/154236lji9rgazn85at5gs.jpg') no-repeat center/cover;
   
8.         box-shadow: 3px 3px 8px #000, 0 0 0 2px silver;
   
9.         overflow: hidden;
   
10.         z-index: 1;
    
11.         position: relative;
    
12. }
    
13. #player {
    
14.         position: absolute;
    
15.         left: 10px;
    
16.         top: 10px;
    
17.         width: 160px;
    
18.         height: 160px;
    
19.         transition: 3s;
    
20.         filter: invert(1) drop-shadow(10 0 24px ForestGreen);
    
21.         cursor: pointer;
    
22.         animation: rot 5s linear infinite var(--state);
    
23. }
    
24. #player:hover { filter: invert(.8) drop-shadow(0 0 24px red); }
    
25. #vid {
    
26.         position: absolute;
    
27.         bottom: 0;
    
28.         width: 100%;
    
29.         height: calc(100% + 100px);
    
30.         object-fit: cover;
    
31.         pointer-events: none;
    
32.         mix-blend-mode: screen;
    
33. }
    
34. @keyframes rot { to { transform: rotate(360deg); } }
    
35. </style>
    
36. 
    
37. <div id="mydiv">
    
38.         <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c8201ef2f7.mp4" loop muted></video>
    
39.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1411532260&userid=1411532260" autoplay loop></audio>
    
40.         <img id="player" src="https://gd-hbimg.huaban.com/7e3a0d4ad64f1b51a7d14c32d060b9bc5d96390456201-vRhA2i" alt="" />
    
41. </div>
    
42. 
    
43. <script>
    
44. 
    
45. (function() {
    
46.         let timer = null, sF = document.createElement('script');
    
47.         sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
    
48.         sF.charset = 'utf-8';
    
49.         document.querySelector('body').appendChild(sF);
    
50.         sF.onload = () => FS({papa: '#mydiv'});
    
51.         mydiv.onmousemove = function(e) {
    
52.                 clearTimeout(timer);
    
53.                 timer = setTimeout(function() {
    
54.                         if(e.target.id === 'player') return;
    
55.                         let x = e.offsetX | e.layerX, y = e.offsetY | e.layerY, sw = player.offsetWidth;
    
56.                         if(x < 0) x = 0;
    
57.                         if(x > mydiv.offsetWidth - sw) x = mydiv.offsetWidth - sw;
    
58.                         if(y < 0) y = 0;
    
59.                         if(y > mydiv.offsetHeight - sw) y = mydiv.offsetHeight - sw;
    
60.                         player.style.cssText += `left: ${x}px; top: ${y}px`;
    
61.                 }, 400);
    
62.         }
    
63. 
    
64.         let mState = () => aud.paused
    
65.                 ? (mydiv.style.setProperty('--state','paused'), vid.pause())
    
66.                 : (mydiv.style.setProperty('--state','running'), vid.play());
    
67.         aud.addEventListener('playing', mState);
    
68.         aud.addEventListener('pause', mState);
    
69.         player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
70. })();
    
71. 
    
72. </script>
    
73. <br><br><br><br><br></td></tr></table>

复制代码

特效链接：
https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c8201ef2f7.mp4

音乐：笑傲江湖主题曲《沧海一声笑》（肖战版）
链接 https://music.163.com/song/media/outer/url?id=1411532260&userid=1411532260

素材图：

                               
登录/注册后可看大图

竹轩听雨

用素得当，光色俱佳，细处更见功力，感谢云笛带来的精彩作品～～

如墨轻蘸

老师的图图真棒！喜欢战火硝烟的氛围！

茶茉

江湖味十足，好美

青石板

又见笛儿图图，很震撼的江湖图图，制作精彩。问好笛儿

云笛

青石板 发表于 2024-7-27 19:07
又见笛儿图图，很震撼的江湖图图，制作精彩。问好笛儿

青儿来了，周末愉快！
这是回赠给令帅的，想着他名字带有江湖味道，所以就制作了一副这样的图送给他

青石板

云笛 发表于 2024-7-27 19:26
青儿来了，周末愉快！
这是回赠给令帅的，想着他名字带有江湖味道，所以就制作了一副这样的 ...

嗯嗯，很用心的制作呢。在这里我就不回赠了。对了笛儿，我重新装了PS，丢失很多字体。我隐约记得你问过我一种字体，我很喜欢的，现在忘记了叫啥字体了，你还记得不?我上传那字体你看看。好像有爱情两个字的

千千羽

画面沧桑，很有气势，那特效也在显示自己的威力，云笛棒棒哒

千千羽

标题制作也是一大亮点：苍劲又潇洒，佩服中……