程池 - 敦煌生命

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #tz {
   
3.         --width: 1024px;
   
4.         margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px));
   
5.         width: var(--width);
   
6.         height: 640px;
   
7.         background: url('https://638183.freep.cn/638183/t24/3/dyhl.jpg') no-repeat center/cover;
   
8.         box-shadow: 3px 3px 8px rgba(0, 0, 0, .6);
   
9.         overflow: hidden;
   
10.         position: relative;
    
11. }
    
12. #player {
    
13.         position: absolute;
    
14.         display: grid;
    
15.         place-items: center;
    
16.         left: 75%;
    
17.         top: 52%;
    
18.         width: var(--ww);
    
19.         height: var(--ww);
    
20.         background: url('https://638183.freep.cn/638183/t23/btn/f5.png') no-repeat 50%/60%;
    
21.         border-radius: 50%;
    
22.         cursor: pointer;
    
23.         transition: .7s;
    
24.         animation: rot 6s linear infinite var(--state);
    
25.         --ww: 120px;
    
26.         --size: 20px;
    
27. }
    
28. #player:hover { filter: hue-rotate(30deg); }
    
29. c-c {
    
30.         position: absolute;
    
31.         width: var(--size);
    
32.         height: var(--size);
    
33.         border-radius: 50%;
    
34.         background: linear-gradient(green, cyan);
    
35.         box-shadow: 0 0 6px rgba(0, 0, 0, .1);
    
36.         animation: flyout 2s forwards;
    
37. }
    
38. #vid {
    
39.         position: absolute;
    
40.         bottom: 0;
    
41.         width: 100%;
    
42.         height: calc(100% + 60px);
    
43.         object-fit: cover;
    
44.         mix-blend-mode: overlay;
    
45.         pointer-events: none;
    
46. }
    
47. #tz:fullscreen #vid { height: calc(100% + 100px); }
    
48. @keyframes flyout {
    
49.         to { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
    
50. }
    
51. @keyframes flyin {
    
52.         from { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
    
53.         to { transform: rotate(calc(var(--deg) * 2)) translateY(0); }
    
54. }
    
55. @keyframes rot {
    
56.         to { transform: rotate(360deg); }
    
57. }
    
58. </style>
    
59. 
    
60. <div id="tz">
    
61.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=75392" autoplay loop></audio>
    
62.         <video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/29/96/5fa09f4e88257.mp4" muted autoplay loop></video>
    
63.         <div id="player" title="暂停"></div>
    
64. </div>
    
65. 
    
66. <script>
    
67. var ccs = [];
    
68. new Array(total = 12).fill(0).map((c,k) => {
    
69.         c = document.createElement('c-c');
    
70.         c.style.cssText += `--deg: ${360 / total * k}deg`;
    
71.         player.appendChild(c);
    
72.         ccs.push(c);
    
73. });
    
74. 
    
75. var mState = () => {
    
76.         player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
77.         player.title = ['暂停','播放'][+aud.paused];
    
78.         ccs.forEach(cc => cc.style.animationName = aud.paused ? 'flyin' : 'flyout');
    
79.         aud.paused ? vid.pause() : vid.play();
    
80. };
    
81. 
    
82. aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
    
83. 
    
84. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
85. 
    
86. var sF = document.createElement('script');
    
87. sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
    
88. sF.charset = 'utf-8';
    
89. document.querySelector('body').appendChild(sF);
    
90. sF.onload = () => FS({
    
91.         papa: '#tz',
    
92.         css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: rgba(0,128,0,.5);',
    
93. });
    
94. </script>

复制代码

梦江南

哇，好精彩！问好老师！

马黑黑

本帖：

（一）CSS代码尽可能规范书写，便于阅读；

（二）代码 04 行，帖子水平方向绝对居中：利用 calc() 函数计算左外边距，需要一个变量 --width，和一个环境横向偏移量（花潮是 81px）。注意代码 05 行，帖子宽度使用了相同的CSS变量 --width 以便前后一致；

（三）播放器由 #player 和 c-c 两个选择器规范其样式：#player 针对父元素，用于装载 c-c 自定义的子元素。c-c 调用一个关键帧动画（代码36行），flyout，2秒的运行周期、停留在结束时的状态，默认执行一次。c-c 其实运行两个关键帧动画，还有一个是 flyin，两个动画将交替运行，由JS代码在管理交互时指派。动画效果是粒子发散、收拢；

（四）JS代码简单说一下各个代码块的含义：

67行：声明 ccs 数组变量，用于存储粒子对象动态生成的 c-c 元素；

68~73行：生成 12 个 c-c 自定义元素（粒子），它们依次旋转不同的角度（角度的作用，通过 @keyframes 动画中rotate配套 translate 平移半径产生，产生预设的分布、分散、收拢效果；

75~80行：联动控制函数，各种需要响应音频播放暂停动作的预设在此制定；

82行：监听 audio控件的三个事件 oncanplay（可以播放状态）、onplaying（开始播放状态）、onpause（暂停状态），运行的是联动控制函数；

84行：播放器点击事件，仅控制音乐的播放/暂停；

86~93：引用与配置全屏插件。配置中，记得指定正确的帖子选择器名称、配置好必要的全屏按钮CSS属性。

马黑黑

补充一下：

47行代码 ：#tz:fullscreen #vid { height: calc(100% + 100px); }

这句的作用，是在全屏状态下，设置视频的高度，以便国宝办公能继续隐身进行。这句代码，:fullscreen 是一个全屏伪类，它的主人是 #tz 选择器，它作用于 #vid 选择器（针对使用了 id="vid" 的 HTML元素。

马黑黑

梦江南 发表于 2024-6-27 08:15
哇，好精彩！问好老师！

南无月

这个视频滤镜里的叠加，效果很赞~
敦煌飞天显得梦幻迷离，
光影的变化让整个画面活灵活现。。
有强烈的视觉冲击

南无月

--ww: 600px;--size: 110px;这两个分别是小播尺寸和球体尺寸。。
width: var(--ww);height: var(--ww);和
width: var(--size);height: var(--size);
设置区分。。这个也是新鲜的。。
还有整贴--width: 1700px;width: var(--width);
这三个宽度在这个贴子里分类得明明白白。。。
又学到一个新的知识点。。

南无月

VID里的高度：height: calc(100% + 60px);
井tz:fullscreen 井vid { height: calc(100% + 100px); }
两个都是对VID有影 响吧，为啥又设一次。

南无月

马黑黑 发表于 2024-6-27 08:20
本帖：

（一）CSS代码尽可能规范书写，便于阅读；

小白只能凭第一感觉，描述表面看到的。。
老师这个说几乎是后台控制方面的。看了很受益。。
代码学习还需要继续加强。

马黑黑

南无月 发表于 2024-6-27 12:32
这个视频滤镜里的叠加，效果很赞~
敦煌飞天显得梦幻迷离，
光影的变化让整个画面活灵活现。。

高度赞扬了都

南无月

马黑黑 发表于 2024-6-27 12:17
补充一下：

47行代码 ：#tz:fullscreen #vid { height: calc(100% + 100px); }

现在明白为啥又设一次了。。全屏加了100PX;果然需要高一些，猫才能隐身。

马黑黑

南无月 发表于 2024-6-27 12:33
--ww: 600px;--size: 110px;这两个分别是小播尺寸和球体尺寸。。
width: var(--ww);height: var(--ww);和
...

CSS目前有少量几个函数可以使用，calc 是计算功能的额函数，非常实用

马黑黑

南无月 发表于 2024-6-27 12:35
小白只能凭第一感觉，描述表面看到的。。
老师这个说几乎是后台控制方面的。看了很受益。。
代码学习还 ...

CSS下个决心，学会一小半是木有问题的

南无月

马黑黑 发表于 2024-6-27 12:37
高度赞扬了都

进来就惊艳到了。。。真的像电影特效似的好看。。。
印象深刻。。这个设计超级赞。

马黑黑

南无月 发表于 2024-6-27 12:33
VID里的高度：height: calc(100% + 60px);
井tz:fullscreen 井vid { height: calc(100% + 100px); }
两 ...

代码都不是一样样纸的。看五楼解释。

南无月

马黑黑 发表于 2024-6-27 12:38
CSS目前有少量几个函数可以使用，calc 是计算功能的额函数，非常实用

嗯哪，calc 这个脸熟。。看到它就知道要开始算啦

南无月

马黑黑 发表于 2024-6-27 12:39
CSS下个决心，学会一小半是木有问题的

这个决心占了90%

南无月

马黑黑 发表于 2024-6-27 12:40
代码都不是一样样纸的。看五楼解释。

fullscreen这个东东管全屏，还有JS的名字也是它。。

马黑黑

南无月 发表于 2024-6-27 12:42
这个决心占了90%

比例不低