Oasis

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

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

帖子代码<style>

#mydiv {
margin: 0 0 0 calc(50% - 593px);
width: 1000px;
height: 600px;
background: url('https://638183.freep.cn/638183/t23/webp2/01.webp') no-repeat center/cover;
box-shadow: 0 0 10px #333;
overflow: hidden;
position: relative;
--state: paused;
}
lz-3d {
position: absolute;
left: calc(50% - 5px);
top: calc(50% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
transform: perspective(200px) rotate(var(--deg)) translate3d(var(--xx), var(--yy), var(--zz));
animation: o2C var(--du) var(--delay) infinite linear var(--state);
}

@keyframes o2C {
to { transform: perspective(200px) rotate(0) translate3d(0,0,0); }
}

</style>

<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=434974069" autoplay loop></audio>

<script>

(function(){
let total = 120, ww = mydiv.offsetWidth, hh = mydiv.offsetHeight;

let script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/api/simpleplayer.js';
document.body.appendChild(script);

Array.from({length: total}).forEach( (item,key) => {
   item = document.createElement('lz-3d');
   item.style.cssText += `
         background: #${Math.random().toString(16).substr(-6)};
         --xx: ${Math.random() * ww}px;
         --yy: ${Math.random() * hh}px;
         --zz: ${150 + Math.random() * 50}px;
         --deg: ${360 + Math.random() * 360}deg;
         --du: ${15 + Math.random() * 15}s;
         --delay: ${Math.random() * -15}s;
   `;
   mydiv.appendChild(item);
});

script.onload = () => {
   HCPlayer({
         papa: '#mydiv',
         player_css: 'left: 10px; bottom: 10px;',
         img: {
            enter: '',/* 进入全屏按钮地址 */
            quit: '',/* 退出全屏按钮地址 */
            play: '',/* 播放按钮地址 */
            pause: '',/* 暂停按钮地址 */
         }
   });
}
})();

</script>

朵拉发表于 2023-9-17 08:27

首席沙发，欣赏~~{:4_190:}

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

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

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

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

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

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

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

红影发表于 2023-9-17 08:36

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

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

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

红影发表于 2023-9-17 08:38

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

红影发表于 2023-9-17 08:43

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

红影发表于 2023-9-17 08:45

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

红影发表于 2023-9-17 08:54

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

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

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

早上好，周末好

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

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

{:4_199:}

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

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

凄美的音乐

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

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

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

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

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

景深大小各用用处

马黑黑 发表于 2023-9-17 09:03

红影发表于 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 09:23

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

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

红影发表于 2023-9-17 09:34

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

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

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

红影发表于 2023-9-17 09:35

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

一上来就听到这样的音乐，真不错啊{:4_173:}

红影发表于 2023-9-17 09:37

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

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

页: [1] 2 3 4 5 6 7 8 9 10

花潮论坛's Archiver

Oasis