论坛 › 欢乐水吧 › 醉相思--祁隆（学习黑黑的图片转换背景）

小辣椒 发表于 2022-6-19 09:02

醉相思--祁隆（学习黑黑的图片转换背景）

<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">
        <h2>醉相思--祁隆</h2>
        <img class="picbox" src="https://wx.ttt.dj/2022/06/19/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>
<audio id="aud" src="https://wx.ttt.dj/2022/06/19/zxs.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 picAr = ['1','2','3','4','5'], idx = 0, flag = true;
let newPic = picAr.map((img) => {
        return ('https://wx.ttt.dj/2022/06/19/0' + img + '.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-6-19 09:04

@马黑黑

黑黑感觉我图片出来不是很快，没有时间检查原因了，今天要出去。马上出发了

晚上见

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

小辣椒 发表于 2022-6-19 09:04
@马黑黑

黑黑感觉我图片出来不是很快，没有时间检查原因了，今天要出去。马上出发了


图片显示正常的。一般而言，感觉加载慢不是代码原因，是访问源的问题（如不稳定性、阶段性阻塞等等）

红影 发表于 2022-6-19 09:53

这一组古装人物好美，亲爱的帖子好漂亮{:4_199:}

加林森 发表于 2022-6-19 10:10

小辣椒也制作出来了。大美女们上午好！{:4_189:}

梦油 发表于 2022-6-19 10:33

小辣椒朋友的作品总是那么吸引人。

上海朝阳 发表于 2022-6-19 12:27

都那么聪明，真的好漂亮。我是看黑黑的代码就像是天文镜里寻星宿，懵

小辣椒 发表于 2022-6-19 21:28

马黑黑 发表于 2022-6-19 09:48
图片显示正常的。一般而言，感觉加载慢不是代码原因，是访问源的问题（如不稳定性、阶段性阻塞等等）

我感觉是图片上传的问题

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

小辣椒 发表于 2022-6-19 21:28
我感觉是图片上传的问题

上传是没问题的，有问题你就看不到了。图片尺寸也是个问题，太大的图片，打开自然会慢一些

小辣椒 发表于 2022-6-19 21:35

马黑黑 发表于 2022-6-19 21:30
上传是没问题的，有问题你就看不到了。图片尺寸也是个问题，太大的图片，打开自然会慢一些

那可能像素大了一个，今天我加了滤镜效果

小辣椒 发表于 2022-6-19 21:36

红影 发表于 2022-6-19 09:53
这一组古装人物好美，亲爱的帖子好漂亮

亲爱的，这个图图感觉不够靓丽{:4_173:}

小辣椒 发表于 2022-6-19 21:37

上海朝阳 发表于 2022-6-19 12:27
都那么聪明，真的好漂亮。我是看黑黑的代码就像是天文镜里寻星宿，懵

怎么会懵？唱歌你不要太好哦{:4_170:}

小辣椒 发表于 2022-6-19 21:38

加林森 发表于 2022-6-19 10:10
小辣椒也制作出来了。大美女们上午好！

队长，这个对有空间的人不难，但队长就上传图片麻烦一点，慢慢做，不急

小辣椒 发表于 2022-6-19 21:38

梦油 发表于 2022-6-19 10:33
小辣椒朋友的作品总是那么吸引人。

谢谢梦油欣赏支持{:4_187:}

加林森 发表于 2022-6-19 21:40

小辣椒 发表于 2022-6-19 21:38
队长，这个对有空间的人不难，但队长就上传图片麻烦一点，慢慢做，不急

好的。谢谢啦。我没空间的。只有慢慢制作了。

小辣椒 发表于 2022-6-19 21:40

加林森 发表于 2022-6-19 21:40
好的。谢谢啦。我没空间的。只有慢慢制作了。

不急的，队长慢慢来

加林森 发表于 2022-6-19 21:44

小辣椒 发表于 2022-6-19 21:40
不急的，队长慢慢来

嗯嗯。明白的。可能有点辛苦吧。不急，我慢慢来。谢谢啦！

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

小辣椒 发表于 2022-6-19 21:35
那可能像素大了一个，今天我加了滤镜效果

做完可以压缩一下

小辣椒 发表于 2022-6-19 21:54

马黑黑 发表于 2022-6-19 21:45
做完可以压缩一下

是的，看见最后效果我就感觉不用加滤镜的，来不及了，早上马上 出去了

马黑黑 发表于 2022-6-19 22:50

小辣椒 发表于 2022-6-19 21:54
是的，看见最后效果我就感觉不用加滤镜的，来不及了，早上马上 出去了

也没啥，我再几个网络环境下测试了速度，可以的

查看完整版本: 醉相思--祁隆（学习黑黑的图片转换背景）