祝樵歌节日快乐：西湖春

马黑黑 · 发表于 2022-6-19 12:42

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

Loading ...

显示全部楼层 · 发表于 2022-6-19 12:47

提示: 作者被禁止或删除内容自动屏蔽

马黑黑 · 发表于 2022-6-19 13:05

醉美水芙蓉发表于 2022-6-19 12:47
黑黑老师动作好快！又是一个漂亮制作！

这个套用就比较容易了

<style>
.outer { left: -214px; width: 1024px; height: 640px; background: transparent; box-shadow: 0 2px 24px #000; position: relative; }
.picbox { position: absolute; width: 1024px; height: 640px; animation: fadeout 2s; }
.mama { left: 20px; bottom: 40px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; border-radius: 0 100%; background: linear-gradient(transparent,green); }
.wrap { width: 90px; height: 60px; box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); -webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); position: relative; }
.mama meter { width: 90px; position: relative; }
.wrap span { width: 6px; height: 60px; bottom: -8px; display: inline-block; position: absolute; }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
.lrcbox { transform: translate(20px, 20px); font: bold 1.2em / 2em sans-serif; color: lightgreen; text-shadow: 1px 1px 1px #000; border-radius: 100% 0; position: absolute; }
@keyframes up { from { top: -6px; } to { top: -16px; } }
@keyframes fadein { from { opacity: .1; } to {opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to {opacity: .1; } }
</style>
<div class="outer">
<img class="picbox" src="https://638183.freep.cn/638183/qd/01.jpg" alt="" />
<div class="mama">
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
<div class="lrcbox">Loading ...</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/06/16/30c4cdb0137a24b3618270afcc99a86c.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let mama = document.querySelector('.mama'),
picbox = document.querySelector('.picbox'),
wrap = document.querySelector('.wrap'),
lrcbox = document.querySelector('.lrcbox'),
aud = document.querySelector('#aud'),
meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min,
prog = (tt, cc) => 100 * cc / tt;
let idx = 0, flag = true, slip= 1;
let picAr = [
'https://638183.freep.cn/638183/qd/01.jpg',
'https://638183.freep.cn/638183/qd/02.jpg',
'https://638183.freep.cn/638183/qd/03.jpg',
'https://638183.freep.cn/638183/qd/04.jpg',
'https://638183.freep.cn/638183/qd/05.jpg',
'https://638183.freep.cn/638183/qd/06.jpg',
'https://638183.freep.cn/638183/qd/07.jpg',
'https://638183.freep.cn/638183/qd/08.jpg',
'https://638183.freep.cn/638183/qd/09.jpg',
'https://638183.freep.cn/638183/qd/10.jpg'
];
let lrcAr = [
['0.00','作词 : 江涛'],
['1.00','作曲 : 陈歌辛'],
['42.65','春风吹，春燕归，桃杏多娇媚。'],
['53.57','侬把舵来郎摇桨，划破西湖水。'],
['64.61','春意浓，春心暖，无力柳叶垂，'],
['75.57','眼儿相望心相印，侬为郎陶醉。'],
['86.76','春意浓，春心暖，无力柳叶垂，'],
['97.66','眼儿相望心相印，侬为郎陶醉。'],
['130.72','春风吹，春燕归，高山山青翠。'],
['141.81','湖上鸳鸯花间蝶，双栖又双飞。'],
['152.68','情切切，意绵绵，无言痴相对，'],
['163.85','但闻远处歌声传，春日最陶醉。'],
['174.65','情切切，意绵绵，无言痴相对，'],
['185.64','但闻远处歌声传，春日最陶醉。']
];
Array.from({length: 10}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.left = key * 6 + key * 3 + 'px';
ele.style.height = num(10,60) + 'px';
ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
wrap.appendChild(ele);
})
let sskey = document.querySelectorAll('.sskey');
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = num(10, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr[j][0] - slip){
lrcbox.innerHTML = lrcAr[j][1];
}
}
});
let timer = setInterval(() => {
idx ++;
if(idx >= picAr.length) idx = 0;
picbox.src = picAr[idx];
flag ? (picbox.style.animation = 'fadein .8s', flag = false) : (picbox.style.animation = 'fadeout .8s', flag = true);
}, 10000);
</script>

复制代码

加林森 · 发表于 2022-6-19 13:06

老黑的制作真不是盖的。太漂亮了。樵歌收礼开森！@樵歌

马黑黑 · 发表于 2022-6-19 13:07

加林森发表于 2022-6-19 13:06
老黑的制作真不盖的。太漂亮了。樵歌收礼开森！@樵歌

蟹蟹鼓励

加林森 · 发表于 2022-6-19 13:08

马黑黑发表于 2022-6-19 13:07
蟹蟹鼓励

应该的应该的。

梦油 · 发表于 2022-6-19 13:08

樵歌朋友节日快乐！黑黑朋友节日快乐！花潮论坛各个辈分的爸爸们父亲节快乐！

马黑黑 · 发表于 2022-6-19 13:08

加林森发表于 2022-6-19 13:08
应该的应该的。

马黑黑 · 发表于 2022-6-19 13:09

梦油发表于 2022-6-19 13:08
樵歌朋友节日快乐！黑黑朋友节日快乐！花潮论坛各个辈分的爸爸们父亲节快乐！

同乐同乐，你也乐乐

加林森 · 发表于 2022-6-19 13:12

马黑黑发表于 2022-6-19 13:08

梦油 · 发表于 2022-6-19 16:04

马黑黑发表于 2022-6-19 13:09
同乐同乐，你也乐乐

谢谢黑黑朋友。

红影 · 发表于 2022-6-19 17:30

这个还带歌词的，黑黑又变换了一种表现方式。这个帖子真漂亮。师兄收礼开心@樵歌

红影 · 发表于 2022-6-19 17:38

借黑黑好帖，同祝天下的父亲们节日快乐

马黑黑 · 发表于 2022-6-19 18:17

红影发表于 2022-6-19 17:38
借黑黑好帖，同祝天下的父亲们节日快乐

蟹蟹

马黑黑 · 发表于 2022-6-19 18:18

红影发表于 2022-6-19 17:30
这个还带歌词的，黑黑又变换了一种表现方式。这个帖子真漂亮。师兄收礼开心@樵歌

主要是镁铝符合樵歌的审美标准

樵歌 · 发表于 2022-6-19 21:26

至底是老师傅出手，这个可以大滴有哇。

樵歌 · 发表于 2022-6-19 21:27

俺有这么些个漂亮女儿，以后小子们可要多多恭维着俺哈

马黑黑 · 发表于 2022-6-19 21:28

樵歌发表于 2022-6-19 21:27
俺有这么些个漂亮女儿，以后小子们可要多多恭维着俺哈

樵歌 · 发表于 2022-6-19 21:29

今天在郊外活动一天才回来，心礼来迟，谢谢小墨，帮俺找到这么些赏心悦目的女儿们

马黑黑 · 发表于 2022-6-19 21:29

樵歌发表于 2022-6-19 21:29
今天在郊外活动一天才回来，心礼来迟，谢谢小墨，帮俺找到这么些赏心悦目的女儿们

醉美水芙蓉该用户已被删除	发表于 2022-6-19 12:47 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

[原创] 祝樵歌节日快乐：西湖春

请马上登录，朋友们都在花潮里等着你哦：）

评分

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

缤纷心情

草莓情怀

青草情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

男儿情怀

指尖上的流年

花潮版主

妙笔生花

前途似锦

花潮美女

一往情深

心香一瓣

金剪刀

天长地久

绚丽缤纷

中秋征文

周年庆

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

春意盎然