马黑黑 发表于 2022-5-11 22:08

加林森 发表于 2022-5-11 22:06
好的好的！

{:5_108:}

加林森 发表于 2022-5-11 22:08

本帖最后由 加林森 于 2022-6-20 16:30 编辑 <br /><br />小辣椒 发表于 2022-5-11 21:58
上来看看就下
要乖啊，好好保重自己的。{:4_187:}

<style>
.outer { left: -224px; width: 1040px; height: 692px; top: 120px; background: linear-gradient(to right top,black,#eee); position: relative; }
.outer h2 { position: absolute; margin: 110px; font: bold 1.8em sans-serif;color: #ccc; text-shadow: 1px 1px 2px #000; }
.picbox        { position: absolute; width: 1040px; height: 692px; animation: fadein 2s; }
.mama { left: 150px; bottom: 380px; 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; }
@keyframes up { from { top: -6px; } to { top: -16px; } }
@keyframes fadein { from { opacity: .1; } to {opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to {opacity: .4; } }
</style>

<div class="outer">
        <img class="picbox" src="https://s1.ax1x.com/2022/06/20/XvnYBn.jpg" alt="" />
        <div class="mama">
                <h2>美人痛-杨曼莉</h2>
                <div class="wrap"></div>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
        </div>
</div>
<audio id="aud" src="https://www.joy127.com/url/90887.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://s1.ax1x.com/2022/06/20/XvnYBn.jpg',
        'https://s1.ax1x.com/2022/06/20/XvuiEq.jpg',
        'https://s1.ax1x.com/2022/06/20/XvuyRS.jpg ',
        'https://s1.ax1x.com/2022/06/20/XvKpRO.jpg',
        'https://s1.ax1x.com/2022/06/20/XvKDm9.jpg',
        'https://s1.ax1x.com/2022/06/20/XvQ0aR.jpg',
        'https://s1.ax1x.com/2022/06/20/XvGjPA.jpg'
];

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 timer = setInterval(() => {
        picbox.style.animation = '';
        idx ++;
        if(idx >= picAr.length) idx = 0;
        picbox.src = newPic;
        flag ? (picbox.style.animation = 'fadeout 2s', flag = false) : (picbox.style.animation = 'fadein 2s', flag = true);
}, 5000);

</script>
<br><br><br><br><br><br><br><br><br><br><br>

红影 发表于 2022-5-11 23:00

非常经典的歌曲，好听又好看，队长真棒{:4_187:}

加林森 发表于 2022-5-11 23:07

红影 发表于 2022-5-11 23:00
非常经典的歌曲，好听又好看，队长真棒

谢谢红影支持啊！{:4_204:}
页: 1 [2]
查看完整版本: 花潮电视（四 ）《布列瑟农》