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

祝樵歌节日快乐：西湖春

<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 - slip){
                        lrcbox.innerHTML = lrcAr;
                }
        }
});

let timer = setInterval(() => {
        idx ++;
        if(idx >= picAr.length) idx = 0;
        picbox.src = picAr;
        flag ? (picbox.style.animation = 'fadein .8s', flag = false) : (picbox.style.animation = 'fadeout .8s', flag = true);
}, 10000);

</script>

醉美水芙蓉 发表于 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 - slip){
                        lrcbox.innerHTML = lrcAr;
                }
        }
});

let timer = setInterval(() => {
        idx ++;
        if(idx >= picAr.length) idx = 0;
        picbox.src = picAr;
        flag ? (picbox.style.animation = 'fadein .8s', flag = false) : (picbox.style.animation = 'fadeout .8s', flag = true);
}, 10000);

</script>


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

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

马黑黑 发表于 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
应该的应该的。

{:4_181:}

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

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

同乐同乐，你也乐乐

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

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


{:4_208:}

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

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

谢谢黑黑朋友。

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

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

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

借黑黑好帖，同祝天下的父亲们节日快乐{:4_187:}

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

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

蟹蟹

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

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

主要是镁铝符合樵歌的审美标准{:4_170:}

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

至底是老师傅出手，这个可以大滴有哇。{:4_176:}

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

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

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

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

{:4_196:}

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

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

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

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

{:4_172:}
页: [1] 2 3 4 5
查看完整版本: 祝樵歌节日快乐：西湖春