绿
本帖最后由 马黑黑 于 2022-6-12 10:24 编辑 <br /><br /><style>.mama { left: -214px; width: 1024px; height: 600px; background: lightgreen url('/data/attachment/forum/202206/12/081117mpv60xld560io50s.jpg') no-repeat center / cover; position: relative; box-shadow: 2px 2px 2px #333; }
.vwrap { width:300px; height: 300pxt; position: absolute; animation: fly 6s linear infinite alternate; border-radius: 50%; z-index: 999;}
.video { width: 300px; height: 300px; object-fit: cover; border-radius: 50%; clip-path: circle(50% at 50% 50%); }
.vwrap::before { position: absolute; content: ''; width: 300px; height: 300px; border-radius: 50%; background: linear-gradient( 30deg,rgba(0,255,0,.5),rgba(0,255,0,.6)); z-index: 1000; }
.lrcWrap { position: absolute; bottom: 100px; left: calc(50% - 200px); padding: 20px; width: fit-content; height: fit-content; text-align: center; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #eee; display: flex; flex-direction: column;align-items: center; }
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.playbtn { width: 10px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
.playbtn:hover { background: red; }
.pausebtn { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
.pausebtn:hover { border-color: transparent red; }
.meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
.slider { display: block; position: absolute; width: 4px; height: 100%; background: white; }
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: green; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px gray; }
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px; overflow: hidden; user-select: none; position: relative; }
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
.lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: gray; text-shadow: 1px 1px 1px black; list-style-type: none; }
@keyframes fly { from{ transform: translate(200px) rotate(0); } to { transform: translate(560px) rotate(120deg); } }
</style>
<div class="mama">
<div class="vwrap">
<video class="video" src="https://img.tukuppt.com/video_show/2629112/00/01/93/5b4e8bb307335.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<div class="lrcWrap">
<p>潮尘 绿</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<div class="playbtn"></div>
<div class="pausebtn"></div>
<div class="meter"><span class="slider"></span></div>
</div>
</div>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1360714052.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
playbtn = document.querySelector('.playbtn'),
pausebtn = document.querySelector('.pausebtn'),
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0;
let lrcAr = [
['0.02','词曲 : 陈雪凝'],
['1.42','演唱 : 潮尘'],
['17.10','说不痛苦那是假的'],
['20.37','毕竟我的心也是肉做的'],
['24.68','你离开时我心里的彩虹'],
['28.49','就变成灰色'],
['32.66','说不心酸那是假的'],
['36.21','如果我真的没那么爱过'],
['40.10','爱着一个没有灵魂的人'],
['43.48','世界都是黑色'],
['47.85','若不是你突然闯进 我生活'],
['51.71','我怎会把死守的寂寞 放任了'],
['55.61','爱我的话你都说'],
['57.51','爱我的事你不做'],
['59.56','我却把甜言蜜语当做你爱我的躯壳'],
['63.97','你的悲伤难过我不参破'],
['67.41','我也会把曾经的且过 当施舍'],
['71.28','不去计较你太多'],
['73.20','从此你在我心里'],
['75.30','只剩绿色'],
['95.72','说很快活那是假的'],
['99.10','你的名字依然那么深刻'],
['102.89','每个字都刺穿我的心脏'],
['106.76','那鲜明的痛是红色'],
['110.82','若不是你突然闯进 我生活'],
['114.62','我怎会把死守的寂寞 放任了'],
['118.60','爱我的话你都说'],
['120.52','爱我的事你不做'],
['122.59','我却把甜言蜜语当做你爱我的躯壳'],
['126.93','你的悲伤难过我不参破'],
['130.68','我也会把曾经的且过 当施舍'],
['134.44','不去计较你太多'],
['136.25','从此你在我心里'],
['138.06','只剩绿色'],
['140.93','呼～'],
['205.38','若不是你突然闯进 我生活'],
['209.08','我怎会把死守的寂寞 放任了'],
['213.00','爱我的话你都说'],
['214.89','爱我的事你不做'],
['216.95','我却把甜言蜜语当做你爱我的躯壳'],
['221.37','你的悲伤难过我不参破'],
['224.84','我也会把曾经的且过 当施舍'],
['228.70','不去计较你太多'],
['230.70','从此你在我心里'],
['232.80','只剩绿色'],
['236.79','若不是你突然闯进 我生活'],
['240.57','我怎会把死守的寂寞 放任了'],
['244.40','爱我的话你都说'],
['246.41','爱我的事你不做'],
['248.46','我却把甜言蜜语当做你爱我的躯壳'],
['252.79','你的悲伤难过我不参破'],
['256.22','我也会把曾经的且过 当施舍'],
['260.22','不去计较你太多'],
['260.28','从此你在我心里'],
['263.95','只剩绿色'],
['268.32','若不是你突然闯进 我生活'],
['271.92','我怎会把死守的寂寞 放任了'],
['275.94','爱我的话你都说'],
['277.80','爱我的事你不做'],
['280.05','我却把甜言蜜语当做你爱我的躯壳']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '" style="list-style-type: none">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
slider.style.transform = 'translate(' + prog + 'px)';
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr - slip){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'gray';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'ghostwhite';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'gray';
lrcUl.style.top = 0;
})
aud.addEventListener('pause', () => btnstate(1));
aud.addEventListener('play',() => btnstate(0));
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
pausebtn.onclick = () => { aud.pause(); btnstate(1); }
playbtn.onclick = () => { aud.play(); btnstate(0); }
let offset = (obj,direction) => {
let offsetDir = "offset" + direction.toUpperCase() + direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
let btnstate = (paused) => {
paused == 1 ? (playbtn.style.display = 'block', pausebtn.style.display = 'none') : (playbtn.style.display = 'none', pausebtn.style.display = 'block');
}
aud.paused ? btnstate(1) : btnstate(0);
</script>
又玩球。。。。{:5_158:} 东篱闲人 发表于 2022-6-12 08:56
又玩球。。。。
本来想送你玩的，怕你分心就算了 马黑黑 发表于 2022-6-12 08:58
本来想送你玩的，怕你分心就算了
你自己玩吧。。。{:4_174:} 东篱闲人 发表于 2022-6-12 09:00
你自己玩吧。。。
只能如此，不能影响你骑驴走四方{:5_106:} 好奇特，那转动的圆球和外围还是动态的。视频还能这样玩，太赞了{:4_199:} 当中的绿球被你变色后，比愿视频还好看，看着很玄幻的样子{:4_199:} 感觉只要当中的圆就很好看，外面的蓝可以不要了{:4_173:} 不过外面的蓝很奇特，三角形的边可以不断变化的{:4_187:} 红影 发表于 2022-6-12 09:24
好奇特，那转动的圆球和外围还是动态的。视频还能这样玩，太赞了
这应该是可以想得到的吧。HTML里，一切皆盒子，是盒子，让它干嘛干嘛的。
当然，图片，音频界面，视频，是特殊的盒子，一些其他元素所拥有的属性它们不一定有，但包裹在父元素之下，通过父元素给变相增加我们需要的属性（比如伪元素样式），总还是可以的，甚至我们可以这样改变图片、视频的颜色（实际上相当于给它一个“滤镜”）。 红影 发表于 2022-6-12 09:26
感觉只要当中的圆就很好看，外面的蓝可以不要了
还是要配套的吧 红影 发表于 2022-6-12 09:25
当中的绿球被你变色后，比愿视频还好看，看着很玄幻的样子
像是装在水晶球里一样，东篱很想玩的，嘴里说不想玩而已{:5_117:} 红影 发表于 2022-6-12 09:30
不过外面的蓝很奇特，三角形的边可以不断变化的
哪里有三角形？ 红影 发表于 2022-6-12 09:30
不过外面的蓝很奇特，三角形的边可以不断变化的
我找到三角形了，两个。已经处理。谢谢提醒。
我的浏览器内核版本很高，一直看不到三角形的。 东篱闲人 发表于 2022-6-12 08:56
又玩球。。。。
星球大战{:4_173:} 圆滚滚的球不停的在动，挺好玩的。全部是绿的，我也给你个绿的颜色。{:4_189:} 有点像时间隧道呢。老黑越玩花样越多了。我搞不赢了。{:4_189:} https://www.huachaowang.com/forum.php?mod=viewthread&tid=60359 马黑黑 发表于 2022-6-12 09:31
这应该是可以想得到的吧。HTML里，一切皆盒子，是盒子，让它干嘛干嘛的。
当然，图片，音频界面，视频， ...
用盒子把它变成什么样，也是个挺有讲究的事。这里的滤镜加得好，比愿视频还好看{:4_173:} 红影 发表于 2022-6-12 11:43
用盒子把它变成什么样，也是个挺有讲究的事。这里的滤镜加得好，比愿视频还好看
有时候要化妆一下，和人一样的吧