瞳 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2024-12-15 13:07

瞳

本帖最后由马黑黑于 2024-12-15 13:58 编辑 <br /><br /><style>
@import 'https://638183.freep.cn/638183/web/mod/aud_lrc.css';
#tz { --state: running; margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://x0.ifengimg.com/ucms/2021_35/30BF26A6959B8DB5752F8520F9A6BFF04F55A735_size762_w1135_h665.png') no-repeat center/cover; }
#player { position: absolute; width: 400px; height: 400px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: rgba(0,0,128,.05); cursor: pointer; display: grid; place-items: center; }
#mypic { width: 100%; height: 100%; opacity: .75; }
#prog { bottom: 30px; width: 280px; --bg1: silver; --bg2: lightblue; --color: lightblue; }
#lrc { top: 30px; }
#fsbtn { bottom: 60px; }
@keyframes in1 {
0% { width: 0; height: 0; transform: rotate(0); }
60% { width: 100%; height: 100%; transform: rotate(-720deg) }
90% { width: 100%; height: 100%; transform: rotate(-720deg); }
100% { width: 0; height: 0; transform: rotate(0); }
}
@keyframes in2 {
0% { width: 0; height: 0; transform: rotate(0); }
60% { width: 100%; height: 100%; transform: rotate(720deg) }
90% { width: 100%; height: 100%; transform: rotate(720deg); }
100% { width: 0; height: 0; transform: rotate(0); }
}
</style>

<div id="tz" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2653052898"></audio>
<div id="player"><img id="mypic" src="https://638183.freep.cn/638183/t24/webp3/t1.webp" alt="" /></div>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="prog" class="prog" data-tt="00:00 00:00"></div>
<div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
import { Aud } from 'https://638183.freep.cn/638183/web/mod/aud_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';

var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];

var audio = new Aud(tz, player, lrcAr);
audio.play();
fscreen.fs(tz, fsbtn);

var picIdx = 0, gapTime = 10000, anis = ['in1', 'in2'];

var picAr = [
'https://638183.freep.cn/638183/t24/webp3/t1.webp',
'https://638183.freep.cn/638183/t24/webp3/t2.webp',
'https://638183.freep.cn/638183/t24/webp3/t3.webp',
'https://638183.freep.cn/638183/t24/webp3/t4.webp',
];

var showPics = (pics) => {
mypic.src = pics;
mypic.style.animation = `${anis} ${gapTime}ms forwards var(--state)`;
picIdx = (picIdx + 1) % pics.length;
};

setInterval( () => {
if(!aud.paused) showPics(picAr);
}, gapTime);

showPics(picAr);
</script>

马黑黑 发表于 2024-12-15 13:08

本帖最后由马黑黑于 2024-12-15 13:58 编辑 <br /><br /><h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/mod/aud_lrc.css';
#tz { --state: running; margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://x0.ifengimg.com/ucms/2021_35/30BF26A6959B8DB5752F8520F9A6BFF04F55A735_size762_w1135_h665.png') no-repeat center/cover; }
#player { position: absolute; width: 400px; height: 400px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: rgba(0,0,128,.05); cursor: pointer; display: grid; place-items: center; }
#mypic { width: 100%; height: 100%; opacity: .75; }
#prog { bottom: 30px; width: 280px; --bg1: silver; --bg2: lightblue; --color: lightblue; }
#lrc { top: 30px; }
#fsbtn { bottom: 60px; }
@keyframes in1 {
0% { width: 0; height: 0; transform: rotate(0); }
60% { width: 100%; height: 100%; transform: rotate(-720deg) }
90% { width: 100%; height: 100%; transform: rotate(-720deg); }
100% { width: 0; height: 0; transform: rotate(0); }
}
@keyframes in2 {
0% { width: 0; height: 0; transform: rotate(0); }
60% { width: 100%; height: 100%; transform: rotate(720deg) }
90% { width: 100%; height: 100%; transform: rotate(720deg); }
100% { width: 0; height: 0; transform: rotate(0); }
}
</style>

<div id="tz" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2653052898"></audio>
<div id="player"><img id="mypic" src="https://638183.freep.cn/638183/t24/webp3/t1.webp" alt="" /></div>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="prog" class="prog" data-tt="00:00 00:00"></div>
<div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
import { Aud } from 'https://638183.freep.cn/638183/web/mod/aud_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';

var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];

var audio = new Aud(tz, player, lrcAr);
audio.play();
fscreen.fs(tz, fsbtn);

var picIdx = 0, gapTime = 10000, anis = ['in1', 'in2'];

var picAr = [
'https://638183.freep.cn/638183/t24/webp3/t1.webp',
'https://638183.freep.cn/638183/t24/webp3/t2.webp',
'https://638183.freep.cn/638183/t24/webp3/t3.webp',
'https://638183.freep.cn/638183/t24/webp3/t4.webp',
];

var showPics = (pics) => {
mypic.src = pics;
mypic.style.animation = `${anis} ${gapTime}ms forwards var(--state)`;
picIdx = (picIdx + 1) % pics.length;
};

setInterval( () => {
if(!aud.paused) showPics(picAr);
}, gapTime);

showPics(picAr);
</script>
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>

马黑黑 发表于 2024-12-15 13:43

本帖：

一、将简易图片轮播第三版用于帖子

图片标签放置于 id="player" 的容器中，该容器同时充当播放控制按钮。多个图片以更换 img 标签的 src 属性值轮番上场，同时运行 CSS 关键帧动画。

这些都在帖子前台完成。

二、aud_lrc模块

此模块是之前 audiolrc 模块的简化版，简化的内容是配置层面，最多只需 3 个参数（带lrc同步），最少 2 个参数（不带lrc同步）。import 模块（代码第32行）之后，使用一个自定义变量实例化 Aud 对象（代码68行），在这里根据情况给出参数：参数1是帖子容器，参数2是按钮，参数3可缺省（缺省表示不使用LRC歌词同步功能，若需要配置，需事先声明花潮格式的数组变量，再用该变量作为参数）。

三、配套的CSS前台设置和HTML代码结构

（一）帖子容器：设置margin定位、宽高尺寸、背景图片以及自己需要的属性。配套的HTML id 可自定义，可加入 class="pa" 以启用模块配套的CSS资源设置；

（二）按钮：自行设计，模块配套的CSS资源没有提供任何设置（但有一个 rot 关键帧动画可调用，旋转360度）。HTML代码中要有该按钮标签；

（三）进度条：是 div 或 span 标签为好，该标签CSS配套资源提供了基本样式，利用背景、两个伪元素营建了进度条的基本功能，CSS变量 --bg1 是进度条底轨色、--bg2 是进度指示色、--color 是文本颜色。HTML进度条标签应有属性 class="prog"；

（四）lrc ：可以使用 div 或 span 标签，建议前者。设置方法请参考其他模块说明，注意 HTML 代码需要 class="lrc" 以启用CSS配套资源的设置；

（五）全屏按钮：这是独立模块，但CSS配套资源有它的样式设置。不使用时去除对应的CSS前台代码、JS的引用和代码中的第 70 行。

梦江南 发表于 2024-12-15 13:50

漂亮的六角形图片转换，欣赏学习了！

梦江南 发表于 2024-12-15 13:51

谢谢老师辛苦！{:4_190:}

花飞飞 发表于 2024-12-15 15:22

这个是把这几天整的图片轮播效果的小播跟细线进度条结合在了一起。。
加歌词版的完整音画。。

花飞飞 发表于 2024-12-15 15:33

裁出一个六边形做为小播，里面显示轮播图片~~这个设计独特新颖，超赞。。
进度条颜色与背景同系列，浅蓝色调，唯美。。

看了说明，按纽也可以自行配置，跟之前一样的，后台有一个 rot 关键帧动画可调用，旋转360度{:4_173:}装一张图片上去就可以的节奏。。

花飞飞 发表于 2024-12-15 15:40

无论是小播还是全屏按纽还是是否歌词，这些贴子元素，
每一块都可以拆卸，可以更改，灵活方便，功能齐全。。
音乐第一次听，独特~~
白老师做贴风格永远沉稳且多变，意外的协调。{:4_170:}

杨帆发表于 2024-12-15 16:26

简洁的代码，强大的功能，美妙的效果，谢谢马老师精彩的深度分享{:4_191:}

朵拉发表于 2024-12-15 20:18

问候老师，图片轮播学习下{:4_204:}

樵歌发表于 2024-12-16 08:53

哇，这瞳可以看透来世今生，可了不得呀{:4_189:}

小辣椒 发表于 2024-12-16 11:15

这个图片转换效果用在这里了，黑黑的创意无限哦{:4_178:}

马黑黑 发表于 2024-12-16 12:28

小辣椒发表于 2024-12-16 11:15
这个图片转换效果用在这里了，黑黑的创意无限哦

有限公司{:4_170:}

马黑黑 发表于 2024-12-16 12:28

梦江南发表于 2024-12-15 13:50
漂亮的六角形图片转换，欣赏学习了！

{:4_190:}

马黑黑 发表于 2024-12-16 12:28

樵歌发表于 2024-12-16 08:53
哇，这瞳可以看透来世今生，可了不得呀

主要是能看到水底下有木有鱼

马黑黑 发表于 2024-12-16 12:29

朵拉发表于 2024-12-15 20:18
问候老师，图片轮播学习下

{:4_190:}

马黑黑 发表于 2024-12-16 12:29

杨帆发表于 2024-12-15 16:26
简洁的代码，强大的功能，美妙的效果，谢谢马老师精彩的深度分享

{:4_191:}

马黑黑 发表于 2024-12-16 12:29

花飞飞发表于 2024-12-15 15:22
这个是把这几天整的图片轮播效果的小播跟细线进度条结合在了一起。。
加歌词版的完整音画。。

是的

马黑黑 发表于 2024-12-16 12:30

花飞飞发表于 2024-12-15 15:33
裁出一个六边形做为小播，里面显示轮播图片~~这个设计独特新颖，超赞。。
进度条颜色与背景同系列，浅蓝色 ...

图片没裁，是图片容器裁了

马黑黑 发表于 2024-12-16 12:30

花飞飞发表于 2024-12-15 15:40
无论是小播还是全屏按纽还是是否歌词，这些贴子元素，
每一块都可以拆卸，可以更改，灵活方便，功能齐全。 ...

一切都是意外{:4_170:}

页: [1] 2 3 4 5

花潮论坛's Archiver

瞳