姬神 - 光明的日子

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: 10px 0 10px calc(50% - 721px);
   
4.         width: 1280px;
   
5.         height: 720px;
   
6.         background: url('https://638183.freep.cn/638183/t23/webp2/glri.webp') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         overflow: hidden;
   
9.         display: grid;
   
10.         place-items: center;
    
11.         position: relative;
    
12.         z-index: 1;
    
13. }
    
14. #mypic {
    
15.         position: absolute;
    
16.         mix-blend-mode: exclusion;
    
17.         cursor: pointer;
    
18.         transition: filter 1s;
    
19.         animation: rot 6s infinite linear var(--state);
    
20. }
    
21. #mypic:hover {
    
22.         filter: invert(100%) drop-shadow(4px 4px 20px snow);
    
23. }
    
24. li-zi {
    
25.         position: absolute;
    
26.         width: 50px;
    
27.         height: 1px;
    
28.         background: linear-gradient(to right,snow,yellow);
    
29.         animation: moving var(--du) var(--de) infinite linear var(--state);
    
30. }
    
31. @keyframes moving {
    
32.         from { transform: translate(0,0) rotate(var(--deg)); opacity: 0; }
    
33.         to { transform: translate(var(--xx),var(--yy)) rotate(var(--deg)); opacity: 1; }
    
34. }
    
35. @keyframes rot { to { transform: rotate(360deg); } }
    
36. </style>
    
37. 
    
38. <div id="papa">
    
39.         <img id="mypic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" title="暂停/播放" />
    
40.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=26178034" autoplay loop></audio>
    
41. </div>
    
42. 
    
43. <script>
    
44. let total = 160;
    
45. Array.from({length: total}).forEach((lz,key) => {
    
46.         lz = document.createElement('li-zi');
    
47.         let hudu = Math.PI / 180 * 360 / total * key;
    
48.         let xx = 800 * Math.cos(hudu), yy = 800 * Math.sin(hudu);
    
49.         lz.style.cssText += `
    
50.                 --xx: ${xx}px;
    
51.                 --yy: ${yy}px;
    
52.                 --deg: ${360 / total * key}deg;
    
53.                 --du: ${2 + Math.random() * 2}s;
    
54.                 --de: -${Math.random() * 3}s;
    
55.         `;
    
56.         papa.prepend(lz);
    
57. });
    
58. let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
59. aud.addEventListener('pause', () => mState());
    
60. aud.addEventListener('playing', () => mState());
    
61. mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
    
62. </script>

复制代码

红影

金光万道，真壮观

红影

播放器按钮鼠标划过还能颜色反转，漂亮

红影

播放器鼠标上去前后的颜色和背景的那块颜色还挺配，真奇妙

幸运草

介个不用歌词，太好了

马黑黑

幸运草 发表于 2023-12-25 13:56
介个不用歌词，太好了

纯音乐

马黑黑

红影 发表于 2023-12-25 12:59
播放器按钮鼠标划过还能颜色反转，漂亮

CSS有元素的 :hover 伪元素，这是一个动态设置入口，然后可以借助一些CSS属性，比如变换大小、背景色、滤镜等，来实现一些有限的动态效果

马黑黑

红影 发表于 2023-12-25 13:07
播放器鼠标上去前后的颜色和背景的那块颜色还挺配，真奇妙

这是融合滤镜（fix/background-blend-mode）的效果。选择一个自己觉得合适的，它会产生一定的透明度，和背景友好相处。融合，需要透明度，**-blend-mode 属性是精心设计的。

马黑黑

红影 发表于 2023-12-25 12:56
金光万道，真壮观

感谢支持，阔气了

红影

马黑黑 发表于 2023-12-25 17:50
CSS有元素的 :hover 伪元素，这是一个动态设置入口，然后可以借助一些CSS属性，比如变换大小、背景色、滤 ...

还好这个是按钮，会想起来鼠标移动上去，有时会想不起用鼠标划拉啊

红影

马黑黑 发表于 2023-12-25 17:53
这是融合滤镜（fix/background-blend-mode）的效果。选择一个自己觉得合适的，它会产生一定的透明度，和 ...

去看了一下，你是说 mix-blend-mode: exclusion; 这个吧，这个融合你还是挺早以前讲的，快忘光了

红影

马黑黑 发表于 2023-12-25 17:53
感谢支持，阔气了

这个真的特别漂亮呢

马黑黑

红影 发表于 2023-12-25 19:46
这个真的特别漂亮呢

还好

马黑黑

红影 发表于 2023-12-25 19:46
去看了一下，你是说 mix-blend-mode: exclusion; 这个吧，这个融合你还是挺早以前讲的，快忘光了{:4_173: ...

不用就会忘记。也不必记下，懂原理就好，用到时查查资料。

马黑黑

红影 发表于 2023-12-25 19:45
还好这个是按钮，会想起来鼠标移动上去，有时会想不起用鼠标划拉啊

那也没关系：你碰到的人千千万万，有交集的也就那么几个

红影

马黑黑 发表于 2023-12-25 20:44
还好

很喜欢这样开阔的视野

红影

马黑黑 发表于 2023-12-25 20:45
不用就会忘记。也不必记下，懂原理就好，用到时查查资料。

是的，需要使用的时候去查一下，就能知道了。

马黑黑

红影 发表于 2023-12-25 22:22
是的，需要使用的时候去查一下，就能知道了。

马黑黑

红影 发表于 2023-12-25 22:21
很喜欢这样开阔的视野

谢谢喜欢