TO红影代码洗衣歌
本帖最后由 有声有色 于 2023-7-25 09:31 编辑 <br /><br /><style>#mydiv { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 575px; background: url('https://s1.ax1x.com/2023/07/22/pCbXG01.png') center/cover no-repeat; border: 1px solid tan; display: grid; place-items: center; position: relative; --state: paused; overflow: hidden; }
#ppwrap { position: absolute; bottom: 300px; width: 120px; height: 120px;display: grid; place-items: center;cursor: pointer; animation: rot 6s infinite linear var(--state); --deg: 360deg;}
#ppwrap::before { position: absolute; content: attr(data-tt); background: url('https://pic.imgdb.cn/item/64bb3c901ddac507cc4bca40.gif');width: 120px; height: 120px;border-radius: 50%; display: grid; place-items: center; mix-blend-mode: lighten; opacity: .65; white-space: pre; font: normal 14px sans-serif; color: snow; animation: rot 6s infinite linear var(--state); --deg: -360deg; }
.pinpu { position: absolute; left: 50%; top: 50%; width: 2px; height: 10px; transform-origin: 50% 0; animation: ppgo var(--du) var(--dl) infinite alternate linear var(--state); }
#pic { position: absolute; left: 100px; bottom: -40px; width: 210px; height: 291px; }
#pic1 { position: absolute; right: 100px; bottom: -30px; width: 262px; height: 340px; }
.vid { position: absolute;left: 0px;top:-55px; width: 1024px; height: 630px; object-fit: cover; opacity: 0.7; clip-path: circle(99% at bottom) ;mix-blend-mode: lighten; }
@keyframes ppgo { to { height: 160px; } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>
<div id="mydiv">
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/00/67/6117b79d71fa8_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img id="pic" src="https://pic.imgdb.cn/item/64b6b1571ddac507cc18d28f.gif" alt="" />
<img id="pic1" src="https://pic.imgdb.cn/item/64bf23101ddac507cc30c3b3.gif" alt="" />
<div id="ppwrap" data-tt="00:00
00:00"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2047756753.mp3" autoplay loop></audio>
<script>
let ppnum = 50;
(function(){
!function(){ Array.from({length: ppnum}).forEach((item,key) => { item = document.createElement('span'); item.className = 'pinpu'; item.style.cssText += ` background: Magenta; transform: rotate(${360 / ppnum * key}deg) translate(60px); --du: ${.2 + Math.random() * .2}s; --dl: -${Math.random()}s; `; ppwrap.appendChild(item); }); }();
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => ppwrap.dataset.tt = toMin(aud.currentTime) + '\n' + toMin(aud.duration));
ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 有声有色朋友早晨好！听着这些老歌、老曲真过瘾。谢谢你！分享了。 都很腻害的说 梦油 发表于 2023-7-23 10:45
有声有色朋友早晨好！听着这些老歌、老曲真过瘾。谢谢你！分享了。
谢谢鼓励 右边的美人跳得好，左边的美人有点比例失调了，瘦骨嶙峋的{:4_173:} 那个视频还留着呢啊，这个制作真漂亮，欣赏有声有色老师好帖{:4_187:}
那个圆圈频谱的颜色可以调整一下呢，不过再看了一下觉得也还不错{:4_173:} 谢谢有声有色老师的好礼，很美好的视听享受{:4_187:} 红影 发表于 2023-7-23 12:17
右边的美人跳得好，左边的美人有点比例失调了，瘦骨嶙峋的
是的，看照片还可以，扣出来那么瘦小 红影 发表于 2023-7-23 12:20
那个视频还留着呢啊，这个制作真漂亮，欣赏有声有色老师好帖
那个圆圈频谱的颜色可以调整一下呢 ...
圆圈频谱我放里我以前做的动画 有声有色 发表于 2023-7-23 11:16
谢谢鼓励
希望经常欣赏到你的好帖子。 美伦美奂的画面，优雅迷人的舞姿，悦耳动听的旋乐！必须惊了！ 樵歌 发表于 2023-7-23 16:31
美伦美奂的画面，优雅迷人的舞姿，悦耳动听的旋乐！必须惊了！
谢谢了 有声有色 发表于 2023-7-23 14:04
是的，看照片还可以，扣出来那么瘦小
可能带背景的时候看不出来吧。 有声有色 发表于 2023-7-23 14:05
圆圈频谱我放里我以前做的动画
是的，看到了。{:4_187:} 醉美水芙蓉 发表于 2023-7-23 19:44
欣赏老师美贴！
谢谢鼓励 有声有色 发表于 2023-7-23 16:34
谢谢了
做贴辛苦啦{:4_190:} 红影 发表于 2023-7-23 12:17
右边的美人跳得好，左边的美人有点比例失调了，瘦骨嶙峋的
右边那小美人是俺师妹{:4_170:} 樵歌 发表于 2023-7-24 11:39
右边那小美人是俺师妹
不知是哪个师妹？？？ 樵歌 发表于 2023-7-24 11:39
右边那小美人是俺师妹
哈哈，我可跳不了那么好{:4_173:}
页:
[1]
2