Oasis

马黑黑

马黑黑

帖子代码

1. <style>
   
2. 
   
3. #mydiv {
   
4.     margin: 0 0 0 calc(50% - 593px);
   
5.     width: 1000px;
   
6.     height: 600px;
   
7.     background: url('https://638183.freep.cn/638183/t23/webp2/01.webp') no-repeat center/cover;
   
8.     box-shadow: 0 0 10px #333;
   
9.     overflow: hidden;
   
10.     position: relative;
    
11.     --state: paused;
    
12. }
    
13. lz-3d {
    
14.     position: absolute;
    
15.     left: calc(50% - 5px);
    
16.     top: calc(50% - 5px);
    
17.     width: 10px;
    
18.     height: 10px;
    
19.     border-radius: 50%;
    
20.     background: gray;
    
21.     transform: perspective(200px) rotate(var(--deg)) translate3d(var(--xx), var(--yy), var(--zz));
    
22.     animation: o2C var(--du) var(--delay) infinite linear var(--state);
    
23. }
    
24. 
    
25. @keyframes o2C {
    
26.     to { transform: perspective(200px) rotate(0) translate3d(0,0,0); }
    
27. }
    
28. 
    
29. </style>
    
30. 
    
31. <div id="mydiv"></div>
    
32. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=434974069" autoplay loop></audio>
    
33. 
    
34. <script>
    
35. 
    
36. (function(){
    
37.     let total = 120, ww = mydiv.offsetWidth, hh = mydiv.offsetHeight;
    
38. 
    
39.     let script = document.createElement('script');
    
40.     script.charset = 'utf-8';
    
41.     script.src = 'https://638183.freep.cn/638183/web/api/simpleplayer.js';
    
42.     document.body.appendChild(script);
    
43. 
    
44.     Array.from({length: total}).forEach( (item,key) => {
    
45.         item = document.createElement('lz-3d');
    
46.         item.style.cssText += `
    
47.             background: #${Math.random().toString(16).substr(-6)};
    
48.             --xx: ${Math.random() * ww}px;
    
49.             --yy: ${Math.random() * hh}px;
    
50.             --zz: ${150 + Math.random() * 50}px;
    
51.             --deg: ${360 + Math.random() * 360}deg;
    
52.             --du: ${15 + Math.random() * 15}s;
    
53.             --delay: ${Math.random() * -15}s;
    
54.         `;
    
55.         mydiv.appendChild(item);
    
56.     });
    
57. 
    
58.     script.onload = () => {
    
59.         HCPlayer({
    
60.             papa: '#mydiv',
    
61.             player_css: 'left: 10px; bottom: 10px;',
    
62.             img: {
    
63.                 enter: '',/* 进入全屏按钮地址 */
    
64.                 quit: '',/* 退出全屏按钮地址 */
    
65.                 play: '',/* 播放按钮地址 */
    
66.                 pause: '',/* 暂停按钮地址 */
    
67.             }
    
68.         });
    
69.     }
    
70. })();
    
71. 
    
72. </script>

复制代码

朵拉

首席沙发，欣赏~~

马黑黑

本帖是极简播放器插件的应用范例。

极简播放器插件提供播放控制+全屏功能模块，它们以图标按钮模式排排坐，鼠标指针移至帖子主界面时显示、离开则消失（移动设备点一下帖子界面可呼出控制按钮）。

进入全屏模式需要点击全屏按钮，退出全屏幕是可点击按钮、可按Esc键。

其次测试H5 3d粒子。本帖测试的3d粒子不需要主场景提供 perspective 视野，粒子自带一切基于3d展现所需的属性，和早前的 《人类遗迹》原理不同。详情请看二楼提供的整帖代码。

粒子的尺寸都是 10*10 ，但展现出来的大小不一致，其运动过程在一个生命周期里还会从大变小。这是 translate3d渲染的结果，它从 XYZ 三个方向全程控制着粒子的变化形态。我使用了好几个CSS变量，以确保：其一，粒子尽可能是从外围进入帖子核心区域；其二，每一个粒子的初始位置应该是不一样的，走的路径、旋转的角度、出发的时间、路径所需时长等也应该有差异性；其三，粒子展现场景每一个角落都应该有粒子的身影，或换言之，粒子应尽可能地均匀出现在演示场景。

纯H5元素粒子相对来说比较消耗资源，所以采用关键帧动画驱动粒子的运动，这对资源平衡有明显的好处。本帖创建120个粒子，《人类遗迹》则使用了500个粒子，运行基本都没有压力。

红影

极简播放器按钮的实例，而且还加了3D粒子，这个漂亮

马黑黑

景深 perspective 设置为 200px，这意味着，translate3d(x,y,z) 参数中的 z 值最好不要突破这个值，不然可能会出现粒子整体抖动现象，样子看上去是卡顿但并不是卡顿。

红影

这景深只有200，却让粒子看着大小各不相同呢，真神奇

红影

这个旋转原来是绕着背景的，还以为是小球自身的。前面的都是插件，没仔细看，看完这个才反应过来

红影

音乐好听，有点阿拉伯音乐神秘，充满了玄幻的味道

红影

这音乐有浓浓的西域风，旋律又有一丝诡异，像是要诉说一个尘封已久的故事。不禁让人想起古楼兰。一切都淹没在浩瀚的星宇中，无数的朝代各个地域，都前仆后继地扑向时间和空间的终点。

马黑黑

朵拉 发表于 2023-9-17 08:27
首席沙发，欣赏~~

早上好，周末好

马黑黑

红影 发表于 2023-9-17 08:54
这音乐有浓浓的西域风，旋律又有一丝诡异，像是要诉说一个尘封已久的故事。不禁让人想起古楼兰。一切都淹没 ...

马黑黑

红影 发表于 2023-9-17 08:45
音乐好听，有点阿拉伯音乐神秘，充满了玄幻的味道

凄美的音乐

马黑黑

红影 发表于 2023-9-17 08:43
这个旋转原来是绕着背景的，还以为是小球自身的。前面的都是插件，没仔细看，看完这个才反应过来

就是小球自身的旋转，每一个小球（粒子）一个运动周期里旋转 360+ 的角度。之前介绍过，translate 之前若使用 rotate，则运动对象会绕圈圈（圆或圆弧、圆或椭圆）。

马黑黑

红影 发表于 2023-9-17 08:38
这景深只有200，却让粒子看着大小各不相同呢，真神奇

景深大小各用用处

马黑黑

红影 发表于 2023-9-17 08:36
极简播放器按钮的实例，而且还加了3D粒子，这个漂亮

3d粒子相对比较抽象，实现方式可以选择：

一、translate3d(x,y,z)；
二、translateX(x) + translateY(y) + translateZ(z)

当然还可配合 rotate3d(x,y,z) 及 rotateX(deg)、rotateY(deg)、rotateZ(deg) 等营造更丰富的3d变换。

此外，还有 matrix3d 可用，这个有难度。

红影

马黑黑 发表于 2023-9-17 08:55

很喜欢这样的音乐，思绪会被它带着不停游荡。。。

红影

马黑黑 发表于 2023-9-17 08:33
本帖是极简播放器插件的应用范例。

极简播放器插件提供播放控制+全屏功能模块，它们以图标按钮模式排排 ...

这个楼层竟然没看到，进来就忙着欣赏帖子和音乐了

红影

马黑黑 发表于 2023-9-17 08:56
凄美的音乐

一上来就听到这样的音乐，真不错啊

红影

马黑黑 发表于 2023-9-17 08:58
就是小球自身的旋转，每一个小球（粒子）一个运动周期里旋转 360+ 的角度。之前介绍过，translate 之前若 ...

嗯嗯，你介绍过的，这个除了是极简播放器的实例，也是旋转的实例呢。通过实例，可以对之前介绍理解更深了。