One

马黑黑

马黑黑

代码（歌词仅保留样式）

1. <style>
   
2. #papa {
   
3.         margin: 20px 0 20px calc(50% - 601px);
   
4.         width: 1200px;
   
5.         height: 800px;
   
6.         background: url('https://638183.freep.cn/638183/t24/jpg/one.jpg') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         overflow: hidden;
   
9.         z-index: 1;
   
10.         transition: filter .75s;
    
11.         display: grid;
    
12.         place-items: center;
    
13.         position: relative;
    
14. }
    
15. #papa::after {
    
16.         position: absolute;
    
17.         content: url('https://638183.freep.cn/638183/t23/btn/uih.webp');
    
18.         right: -15px;
    
19.         top: -15px;
    
20.         mask: linear-gradient(to top, transparent 10%, red 65%, red 0);
    
21.         -webkit-mask: linear-gradient(to top, transparent 10%, red 65%, red 0);
    
22. }
    
23. #papa:hover { filter: brightness(80%); }
    
24. #papa video {
    
25.         position: absolute;
    
26.         width: 100%;
    
27.         height: 100%;
    
28.         object-fit: cover;
    
29.         mix-blend-mode: screen;
    
30.        
    
31. }
    
32. </style>
    
33. 
    
34. <div id="papa">
    
35.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=413961696" autoplay="" loop=""></audio>
    
36.         <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6dda0115f.mp4" muted loop></video>
    
37. </div>
    
38. 
    
39. <script>
    
40. (function() {
    
41.         let script = document.createElement('script');
    
42.         script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
    
43.         script.charset = 'utf-8';
    
44.         document.head.appendChild(script);
    
45.         let geci = [ [2,"Amy Diamond - One",5], [9.01,"I knew, as soon as I saw you<br>当我见到你时，我就明了",3.5] ];
    
46.         script.onload = () => {
    
47.                 HCPlayer({
    
48.                         papa: '#papa',
    
49.                         lrcAr: geci,
    
50.                         lrc_css: 'top: 20px; color: rgba(250,250,250,.4); --bg: url("https://638183.freep.cn/638183/small/002.png");',
    
51.                         fs_css: 'bottom: 80px; left:340px; color: #eee; background: #333;',
    
52.                         player_css: `
    
53.                                 bottom: 30px;
    
54.                                 left: 260px;
    
55.                                 border-width: 0;
    
56.                                 color: #fff;
    
57.                                 --size: 240px;
    
58.                                 --bRad: 50%;
    
59.                                 --track: gray;
    
60.                                 --prog: lightblue;
    
61.                                 --btnBg: url('https://638183.freep.cn/638183/t23/btn/uih.webp') no-repeat center/cover;
    
62.                         `,
    
63.                 });
    
64.         };
    
65.         setInterval(() => aud.paused ? vid.pause() : vid.play());
    
66. })();
    
67. </script>

复制代码

起个网名好难

                               
登录/注册后可看大图

红影

有意思，这样五颜六色的双行歌词，和脚链效果正好相配。
那朵花儿既作为按钮，也点缀了背景。

红影

黑黑的制作总是把各种效果信手拈来，这构思太灵活了

红影

这个帖子里还出现了上节课讲过的遮罩mask，只是用法和上节课不太一样呢

红影

鼠标移动还能让背景变暗，很有趣

马黑黑

起个网名好难 发表于 2024-1-13 08:55

早上好

马黑黑

红影 发表于 2024-1-13 10:18
有意思，这样五颜六色的双行歌词，和脚链效果正好相配。
那朵花儿既作为按钮，也点缀了背景。

右上角的山茶花既是点缀也是遮盖，挡住了办公的熊猫

马黑黑

红影 发表于 2024-1-13 10:36
鼠标移动还能让背景变暗，很有趣

这是小儿科

马黑黑

红影 发表于 2024-1-13 10:19
黑黑的制作总是把各种效果信手拈来，这构思太灵活了

这是年纪大的缘故

马黑黑

红影 发表于 2024-1-13 10:32
这个帖子里还出现了上节课讲过的遮罩mask，只是用法和上节课不太一样呢

mask我们早就使用的，比如那个中央挖孔的光盘

马黑黑

醉美水芙蓉 发表于 2024-1-13 11:31
欣赏老师新作品！好漂亮哦！

上午好

亦是金

好帖，有许多新效果，又可以学习套用了！谢谢老师的代码！

红影

马黑黑 发表于 2024-1-13 10:39
右上角的山茶花既是点缀也是遮盖，挡住了办公的熊猫

原来是这样，聪明

红影

马黑黑 发表于 2024-1-13 10:40
这是小儿科

在这个帖子里的效果特别好呢

红影

马黑黑 发表于 2024-1-13 10:40
这是年纪大的缘故

哈哈，你还年轻，相对于千岁，你是青少年呢

红影

马黑黑 发表于 2024-1-13 10:41
mask我们早就使用的，比如那个中央挖孔的光盘

是的，用是用过，但没留意啊

马黑黑

红影 发表于 2024-1-13 15:49
是的，用是用过，但没留意啊