十万八千梦少年
本帖最后由 醉美水芙蓉 于 2022-7-19 21:52 编辑 <br /><br /><style>#papa { left: -214px; width: 1300px; height: 950px; box-shadow: 3px 3px 30px #000; border-radius: 6px; background: rgba(0,0,0,.6) url('https://s1.ax1x.com/2022/07/19/j77EHx.png') no-repeat center/cover; perspective: 2000px;position: relative; }
#ani { position: absolute; left: calc(50% - 150px); top: calc(50% - 350px); width: 500px; height: 800px; box-shadow: 2px 2px 10px #000; background: #ccc; transform-style: preserve-3d; }
#papa p { margin: 0; padding: 0; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#playbox { position: absolute; left: 20px; bottom: 20px; padding: 10px; font: normal 1em sans-serif; color: #eee; background: rgba(255,255,255,.2); border-radius: 8px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes ani1 { 20% { transform: rotateY(30deg); } 40% { transform: rotateY(-30deg); } 0%,60%,100% {transform: rotateY(0deg); } }
@keyframes ani2 { 20% { transform: rotateX(15deg); } 40% { transform: rotateX(-15deg); } 0%,60%,100%{transform: rotateX(0deg); } }
@keyframes ani3 { 20% { transform: rotateZ(20deg); } 40% { transform: rotateZ(-20deg); } 0%,60%,100% {transform: rotateZ(0deg); } }
@keyframes ani4 { 20% { transform: scale(1.2); } 40% { transform: scale(0.8); } 0%,60%,100% {transform: scale(1); } }
@keyframes ani5 { 20% { transform: skew(15deg); } 40% { transform: skew(-15deg); } 0%,60%,100% {transform: skew(0deg); }}
@keyframes in { from { transform: rotate(0) scale(0); } to {transform: rotate(1turn) scale(1); } }
@keyframes out{ from { transform: rotate(0) scale(1); } to {transform: rotate(-1turn) scale(0); } }
</style>
<div id="papa">
<img id="ani" alt="" src="https://638183.freep.cn/638183/t22/hl//001.jpg">
<div id="playbox">
<p id="geci" style="font-size: 1.2em; text-shadow: 1px 1px 1px #222">loading ... </p>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per">00:00</span>
</p>
</div>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=227901224&.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let flag = 0, last = 0;
let picAr = [
'https://s1.ax1x.com/2022/07/19/j7Hao6.png',
'https://s1.ax1x.com/2022/07/19/j7HUdx.jpg',
'https://s1.ax1x.com/2022/07/19/j7HNe1.jpg',
'https://s1.ax1x.com/2022/07/19/j7HYLR.jpg',
'https://s1.ax1x.com/2022/07/19/j7HJy9.jpg',
'https://s1.ax1x.com/2022/07/19/j7HGQJ.jpg',
'https://s1.ax1x.com/2022/07/19/j7H3z4.jpg',
'https://s1.ax1x.com/2022/07/19/j7H1WF.jpg',
'https://s1.ax1x.com/2022/07/19/j7LfFx.jpg',
'https://s1.ax1x.com/2022/07/19/j7L2wR.jpg',
];
let aniAr = Array.from({length:5}, (_, x) => 'ani' + (x+1));
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let lrcAr = [
['0.00','海来阿木 - 十万八千梦少年 (DJ彭锐版)'],
['3.07','词: 海来阿木'],
['8.10','曲: 海来阿木'],
['15.03','唱: 海来阿木'],
['19.03','LRC编辑：醉美水芙蓉'],
['21.07','风吹过天上的云'],
['24.01','雨打湿少年的心'],
['26.05','他乡纵有当头月'],
['31.03','不抵故乡一盏灯'],
['36.01','我有十万八千梦'],
['38.05','就在脚下泥土中'],
['40.09','风吹雨打路难行'],
['45.06','苦尽甘来终有时'],
['50.02','哦哦哦哦'],
['59.05','哦哦哦哦'],
['88.08','看他杯中酒又满'],
['91.03','定是旁人又提她'],
['93.07','若是眼泪会说话'],
['98.05','聚散从来不由他'],
['103.03','你是岁月里的诗'],
['105.08','你是青春里的歌'],
['108.00','世间再无对的人'],
['112.09','痴情一个错的你'],
['117.04','哦哦哦哦'],
['138.07','哦哦哦哦'],
['156.01','风吹过天上的云'],
['158.05','雨打湿少年的心'],
['160.09','他乡纵有当头月'],
['165.07','不抵故乡一盏灯'],
['170.05','我有十万八千梦'],
['172.09','就在脚下泥土中'],
['175.03','风吹雨打路难行'],
['180.01','苦尽甘来终有时'],
['184.09','风吹雨打路难行'],
['189.07','苦尽甘来终有时'],
['194.02','哦哦哦哦'],
['203.05','哦哦哦哦'],
['208.04','谢谢欣赏！']
];
picAni();
function picAni() {
if(flag == 0) {
let pic = num(0, picAr.length - 1);
if(pic == last) pic = last < 1 ? pic + 1 : pic - 1;
ani.src = picAr;
ani.style.animation = 'in 8s linear forwards';
last = pic;
flag = 1;
} else if(flag == 1) {
let idx = num(0,aniAr.length - 1);
ani.style.animation = aniAr + ' 8s linear forwards';
flag = 2
} else {
ani.style.animation = 'out 8s linear forwards';
flag = 0;
}
setTimeout(picAni,8000);
}
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr) geci.innerHTML = lrcAr;
}
});
let toMin = (val) => {
if(!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60);
let sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
醉美水芙蓉 发表于 2022-7-19 23:14
不知道这个起什么作用，没有注意到！
<img>标签需要有合法src值，一般不留空，否则编辑器会报错，w3c检测也通不过 这个做得真漂亮，水芙蓉学得好快，厉害{:4_187:} 芙蓉也是神速。赞个。
代码里，还保留有我的一张图片，
<img id="ani" alt="" src="https://638183.freep.cn/638183/t22/hl//001.jpg"> 挺好的。 红影 发表于 2022-7-19 22:09
这个做得真漂亮，水芙蓉学得好快，厉害
红影美女晚上好！ 马黑黑 发表于 2022-7-19 22:12
芙蓉也是神速。赞个。
代码里，还保留有我的一张图片，
不知道这个起什么作用，没有注意到！ 加林森 发表于 2022-7-19 22:56
挺好的。
谢谢队长支持！ 醉美水芙蓉 发表于 2022-7-19 23:15
谢谢队长支持！
制作漂亮！{:4_199:} 醉美水芙蓉 发表于 2022-7-19 23:13
红影美女晚上好！
问好水芙蓉，抱抱{:4_179:} 马黑黑 发表于 2022-7-20 06:59
标签需要有合法src值，一般不留空，否则编辑器会报错，w3c检测也通不过
喔！原来如此！ 醉美水芙蓉 发表于 2022-7-20 11:39
喔！原来如此！
对，图片标签总是要有src值的，虽然后面JS会重新给它指定图片
页:
[1]