论坛 › 动画音画 › 旋涡（测试h5粒子动画5）

马黑黑 发表于 2023-9-13 21:54

旋涡（测试h5粒子动画5）

本帖最后由 马黑黑 于 2023-9-13 21:56 编辑 <br /><br /><style>
#mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; box-shadow: 0 0 12px gray; background: url('https://638183.freep.cn/638183/t23/webp2/xrwo.webp') no-repeat center/cover; overflow: hidden; z-index: 1; position: relative; --state: running; }
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://file.uhsea.com/2309/f771566dbcbb1038ed45fbe2c5624bceCN.mp3" loop autoplay></audio>

<script>
(function() {

let js1 = 'https://638183.freep.cn/638183/web/api/tube_lrc.js', js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.js';

let loadJs = (url,callback) => {
        let body = document.querySelector('body'), jsNode = document.createElement('script');
        jsNode.charset = 'utf-8';
        jsNode.setAttribute('src', url);
        body.appendChild(jsNode);
        jsNode.onload = () => callback();
};

loadJs(js1, () => {
        let geci = [,];
        HCPlayer({
                papa: '#mydiv',
                lrcAr: geci,
                lrc_css: `
                        top: 20px;
                        color: silver;
                        --bg: linear-gradient(rgba(10,100,100,.4),rgba(10,100,100,.7));
                `,
                player_css: `
                        bottom: 10px;
                        opacity: .95;
                        --track: silver;
                        --prog: red;
                        --color: silver;
                        --bg: conic-gradient(tan,blue,green,pink,lightblue);
                `,
        });
});

loadJs(js2, () => {
        H5lz({
                papa: '#mydiv',
                total: 180,
                size: {width: 10, height: 10},
                shape: {background: '', borderRadius: '50%'},
                maxTime: 24,
                offset: {x: 0, y: 0},
                ani: 'c2Out',
                css: 'opacity: .8;',
        });
});

})();

</script>

马黑黑 发表于 2023-9-13 21:55

因为JS资源有所改变，如果此前打开过论坛中使用过此资源的帖子，请按以下 Ctrl + F5 刷新帖子，这样就可以看到效果。

马黑黑 发表于 2023-9-13 21:56

本帖最后由 马黑黑 于 2023-9-13 22:06 编辑

帖子代码<style>
#mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; box-shadow: 0 0 12px gray; background: url('https://638183.freep.cn/638183/t23/webp2/xrwo.webp') no-repeat center/cover; overflow: hidden; z-index: 1; position: relative; --state: running; }
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://file.uhsea.com/2309/f771566dbcbb1038ed45fbe2c5624bceCN.mp3" loop autoplay></audio>

<script>

let js1 = 'https://638183.freep.cn/638183/web/api/tube_lrc.js', js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.js';

let loadJs = (url,callback) => {
        let body = document.querySelector('body'), jsNode = document.createElement('script');
        jsNode.charset = 'utf-8';
        jsNode.setAttribute('src', url);
        body.appendChild(jsNode);
        jsNode.onload = () => callback();
};

loadJs(js1, () => {
        let geci = [,];
        HCPlayer({
                papa: '#mydiv',
                lrcAr: geci,
                lrc_css: `
                        top: 20px;
                        color: silver;
                        --bg: linear-gradient(rgba(10,100,100,.4),rgba(10,100,100,.7));
                `,
                player_css: `
                        bottom: 10px;
                        opacity: .95;
                        --track: silver;
                        --prog: red;
                        --color: silver;
                        --bg: conic-gradient(tan,blue,green,pink,lightblue);
                `,
        });
});

loadJs(js2, () => {
        H5lz({
                papa: '#mydiv',
                total: 180,
                size: {width: 10, height: 10},
                shape: {background: '', borderRadius: '50%'},
                maxTime: 24,
                offset: {x: 0, y: 0},
                ani: 'c2Out',
                css: 'opacity: .8;',
        });
});

</script>

马黑黑 发表于 2023-9-13 21:59

h5粒子插件在原来 （请参阅 http://mhh.52qingyin.cn/art/show ... rt=mahei_1694186574） 四个动画的基础上加了一个 c2Out 动画，就是本帖呈现的样子：粒子从中心（c位）出发，顺时针旋转到外面（2Out）。配置在三楼代码中的 49 行。

马黑黑 发表于 2023-9-13 22:02

h5粒子插件的动画，全部基于 CSS 关键帧动画，它因此是受限的，运动形态一般依赖于 CSS 变量。开发此插件，意在挑战自己，看看自己基于CSS关键帧动画能做到多少。

马黑黑 发表于 2023-9-13 22:06

醉美水芙蓉 发表于 2023-9-13 22:01
欣赏老师制作的精彩特效！

精彩不精彩不好说，玩玩

红影 发表于 2023-9-13 22:19

这个真漂亮，彩色粒子从当中散发出来，和背景图结合得那么完美。非常赞{:4_199:}

红影 发表于 2023-9-13 22:20

马黑黑 发表于 2023-9-13 21:55
因为JS资源有所改变，如果此前打开过论坛中使用过此资源的帖子，请按以下 Ctrl + F5 刷新帖子，这样就可以 ...

这个粒子的插件名称还是原来的，那之前的那个帖子里的效果不也跟着变了？

马黑黑 发表于 2023-9-13 22:46

红影 发表于 2023-9-13 22:20
这个粒子的插件名称还是原来的，那之前的那个帖子里的效果不也跟着变了？

它不改变之前用到的功能

马黑黑 发表于 2023-9-13 22:47

红影 发表于 2023-9-13 22:19
这个真漂亮，彩色粒子从当中散发出来，和背景图结合得那么完美。非常赞

测试中，不知道有木有问题

红影 发表于 2023-9-13 23:01

马黑黑 发表于 2023-9-13 22:46
它不改变之前用到的功能

哦，是在 ani: 'c2Out', 中调节的吧。

红影 发表于 2023-9-13 23:01

马黑黑 发表于 2023-9-13 22:47
测试中，不知道有木有问题

目前看起来没问题{:4_204:}

马黑黑 发表于 2023-9-13 23:02

红影 发表于 2023-9-13 23:01
目前看起来没问题

有时候需要一点时间才发现

红影 发表于 2023-9-13 23:09

马黑黑 发表于 2023-9-13 23:02
有时候需要一点时间才发现

我一般是跟着做时经常碰到问题，不过都是我自己的问题{:4_173:}

马黑黑 发表于 2023-9-13 23:09

红影 发表于 2023-9-13 23:09
我一般是跟着做时经常碰到问题，不过都是我自己的问题

是问题就是问题

梦油 发表于 2023-9-14 09:15

真漂亮，真漂亮！你可真行！{:5_116:}

红影 发表于 2023-9-14 10:27

马黑黑 发表于 2023-9-13 23:09
是问题就是问题

能解决的最后就不是问题了{:4_173:}

马黑黑 发表于 2023-9-14 13:24

红影 发表于 2023-9-14 10:27
能解决的最后就不是问题了

不是问题也曾经是个问题

马黑黑 发表于 2023-9-14 13:30

梦油 发表于 2023-9-14 09:15
真漂亮，真漂亮！你可真行！

谢谢鼓励

红影 发表于 2023-9-14 15:52

马黑黑 发表于 2023-9-14 13:24
不是问题也曾经是个问题

最后就成了进步的阶梯{:4_173:}

查看完整版本: 旋涡（测试h5粒子动画5）