Jannik - Grace

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 681px);
   
4.         width:1200px;
   
5.         height: 798px;
   
6.         border: 1px solid gray;
   
7.         background: url('https://638183.freep.cn/638183/t24/jpg/grace.jpg') no-repeat center/cover;
   
8.         box-shadow: 3px 6px 12px #000;
   
9.         z-index: 1;
   
10.         position: relative;
    
11.         display: grid;
    
12.         place-items: center;
    
13. }
    
14. #papa::before, #papa::after {
    
15.         position: absolute;
    
16.         content: '';
    
17.         left: calc(50% - 300px);
    
18.         width: 50%;
    
19.         height: 100%;
    
20.         background: url('https://638183.freep.cn/638183/t23/2/118.jpg') no-repeat center/cover;
    
21.         clip-path: circle(300px at 50% 50%); /*0 50%,50% 100%, 100% 50%, 50% 0 || 0 50%,50% 100%,100% 100%,100% 0, 50% 0*/
    
22.         opacity: .4;
    
23.         animation: move 20s forwards;
    
24.         --xx: 0;
    
25. }
    
26. #papa::after {
    
27.         transform: scale(-1,1);
    
28.         --xx: 50%;
    
29. }
    
30. @keyframes move {
    
31.         to { left: var(--xx); }
    
32. }
    
33. </style>
    
34. 
    
35. <div id="papa"></div>
    
36. 
    
37. <script>
    
38. var sf = document.createElement('script');
    
39. sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
    
40. sf.charset = 'utf-8';
    
41. document.body.appendChild(sf);
    
42. 
    
43. sf.onload = () => {
    
44.         var player = new ypP();
    
45.         player.setAudSrc('https://music.163.com/song/media/outer/url?id=528423473');
    
46.         player.setBtnCss(`
    
47.                 width: 300px;
    
48.                 bottom: 10px;
    
49.                 z-index: 10;
    
50.                 opacity: .75;
    
51.                 --btnBg: url('https://638183.freep.cn/638183/web/svg/sunfl-1.svg') no-repeat center/cover;
    
52.                 --trackBg: transparent;
    
53.                 --progBg: orange;
    
54.                 --btnSize: 80px;
    
55.         `);
    
56.         player.setLrcCss('top: 15px; color: tan; --bg: orange; z-index: 9;');
    
57.         player.lrcAr = [ [2.00,"Jannik - Grace",2.5], [15.00,"",0] ];
    
58. };
    
59. </script>

复制代码

马黑黑

Jannik 是入驻网页云音乐的华人歌手，专注于颇具个性的 Jannik Music，个人介绍：简单可以，简陋永远不行。 邮箱：jannikmusic@163.com

红影

这个前景图图缓缓移开，看着好奇妙啊。漂亮

红影

transform: scale(-1,1);能看懂，关于移动，我还想了一会才明白，也就是开始居中，然后伪元素的before移动到了最左边，after移动到了50%的位置，正好两个圆形平均分布了

红影

一遍遍地看着两个圆球图面移动，好美

马黑黑

红影 发表于 2024-1-9 12:19
一遍遍地看着两个圆球图面移动，好美

最初的设计是做两个菱形，也很漂亮，然后又做半菱形的，也还可以。详情见注释掉的代码。发布前还有做成椭圆的，也不错，最后觉得圆形可能更符合图意与曲意，就酱定型了。

其实可以不用 clip-path，直接 border-radius: 50% 就可以了。

马黑黑

红影 发表于 2024-1-9 12:18
transform: scale(-1,1);能看懂，关于移动，我还想了一会才明白，也就是开始居中，然后伪元素的before移动 ...

CSS关键帧动画，如果是基于left、top之类的属性的方位变换，可以不用from，前提是元素做了对应的绝对定位。

如果用 transform: translate()，元素自身可以不做left、top定位，但实际上它们也要定位（比如父元素的约束定位）。translate() 就不好用百分比了，要用实体单位的尺寸数据，例如 200px。这里不用translate来驱动元素的位移，有计算方面的考量，同时 ::after 已经用了 transform: scale()，加入 translate 会增加代码设计的麻烦。

红影

马黑黑 发表于 2024-1-9 12:54
最初的设计是做两个菱形，也很漂亮，然后又做半菱形的，也还可以。详情见注释掉的代码。发布前还有做成椭 ...

那个菱形的肯定也好看，半菱形的遮挡太多，可能一般。

红影

马黑黑 发表于 2024-1-9 13:02
CSS关键帧动画，如果是基于left、top之类的属性的方位变换，可以不用from，前提是元素做了对应的绝对定位 ...

原来使用--xx还有避免使用translate 的考虑啊，这个细节很重要

马黑黑

红影 发表于 2024-1-9 13:55
原来使用--xx还有避免使用translate 的考虑啊，这个细节很重要

这不是变量 --xx 的事情。--xx 只是一个CSS变量。是left和translate使用单位和其他特性上的区别。

马黑黑

红影 发表于 2024-1-9 13:53
那个菱形的肯定也好看，半菱形的遮挡太多，可能一般。

试过了？

马黑黑

醉美水芙蓉 发表于 2024-1-9 16:41
这是啥情况？黑黑老师变得天文望远镜吗？

世外桃源

漂亮的特效

世外桃源

欣赏高手老师的好高水平制作

樵歌

特效技巧，坐下欣赏围观吃瓜

马黑黑

樵歌 发表于 2024-1-9 17:43
特效技巧，坐下欣赏围观吃瓜

瓜多吃无妨

马黑黑

世外桃源 发表于 2024-1-9 16:47
欣赏高手老师的好高水平制作

晚上嚎

红影

马黑黑 发表于 2024-1-9 16:37
这不是变量 --xx 的事情。--xx 只是一个CSS变量。是left和translate使用单位和其他特性上的区别。

是啊，用了left的变化，就不用考虑translate了呢