悟 TO 东篱闲人
<style>#papa { left: -302px; top: 120px;width: 1200px; height: 640px; background: gray url('https://pic.imgdb.cn/item/630e2dd616f2c2beb1392f61.jpg') no-repeat center/cover;box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; overflow: hidden;}
#h5player { position: absolute; display: grid; place-items: center; width: 220px; height: 220px; left: 760px; top: 140px; background: teal; border-radius: 50%; background: tan conic-gradient(from 0deg, red, green, red 1%, snow 0); mask: radial-gradient(transparent 90%, red 91%, red 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); cursor: pointer; }
#tmsg { position: absolute; left: 830px; top: 380px; font: normal 20px sans-serif; }
#lrctext { position: absolute; left: 740px; top: 460px; font: bold 26px sans-serif;text-align: center; }
.shipin { position: absolute; width: 100%; height: 720px; top:-80px;object-fit: cover; opacity: .25;}
#tupian { position: absolute; width: 210px; height: 210px; left: 765px; top: 145px; z-index: -1;animation: rot 2s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<video class="shipin" src="https://img.tukuppt.com/video_show/2405179/00/02/36/5b58306e3e767.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
<span id="tmsg">00:00 00:00</span>
<span id="h5player"></span>
<span id="lrctext">lrc歌词</span>
<div id="tupian"><img alt="" src="https://pic.imgdb.cn/item/630e2f9016f2c2beb13a0453.png"/></div>
<div style="position: absolute; left:770px; top: 365px; width:40px;">
<img alt="" src="https://pic.imgdb.cn/item/62a58e030947543129f49b59.gif"/></div>
</div><br><br><br><br><br><br>
<script>
let aud = new Audio();
let lrcAr = [
['0.07','《悟》原唱刘德华 '],
['3.07','帖赠东篱大哥 感谢好礼'],
['7.37','无量心 生福报 无极限'],
['13.60','无极限 生息息 爱相连'],
['20.04','为何君视而不见 规矩定方圆'],
['26.40','悟性 悟觉 悟空 心甘情愿'],
['32.83','放下 颠倒梦想 放下云烟'],
['39.19','放下 空欲色 放下悬念'],
['45.59','多一物 却添了 太多危险'],
['52.00','少一物 贪嗔痴 会少一点'],
['58.33','若是缘 再苦味也是甜'],
['64.75','若无缘 藏爱 在心田'],
['71.14','尘世 藕断丝还连 回首一瞬间'],
['77.59','种颗善因 陪你走好每一天'],
['109.68','唯有 心无挂碍 成就大愿'],
['115.99','唯有 心无故 妙不可言'],
['122.34','算天算地 算尽了 从前'],
['128.76','算不出 生死 会在哪一天'],
['135.20','勿生恨 点化虚空的眼'],
['141.57','勿生怨 欢喜 不遥远'],
['147.97','缠绕 欲望的思念 善恶一瞬间'],
['154.36','心怀忏悔 陪你走好每一天'],
['161.88','再牢的谎言 却逃不过天眼'],
['167.99','明日之前 心流离更远'],
['174.39','浮云霎那间 障眼 人心渐离间'],
['180.77','集苦连连 不断的出现'],
['186.46','无量心 生福报 无极限'],
['192.75','无极限 生息息 爱相连'],
['199.17','凡人却视而不见 规矩定方圆'],
['205.57','悟性 悟觉 悟空 心甘情愿'],
['211.93','简简单单 陪你走好每一天']
];
aud.src = 'https://music.163.com/song/media/outer/url?id=178873.mp3';
aud.autoplay = true;
aud.loop = true;
h5player.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) { //轨道
let deg = Math.atan2(e.offsetY - 105, e.offsetX - 105) * 180 / Math.PI;
deg += (e.offsetX < 110 && e.offsetY < 110) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
} else { //内区域
aud.paused ? aud.play() : aud.pause();
}
}
aud.addEventListener('timeupdate', () => {
tmsg.innerHTML = toMin(aud.duration) + '\n' + toMin(aud.currentTime);
h5player.style.background = 'conic-gradient(from 0deg, red, green, red ' + aud.currentTime / aud.duration * 100 + '%, #ccc 0)';
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
}
});
let isHover = (x,y) => Math.pow(x - 110, 2) + Math.pow(y - 110, 2) >= Math.pow(100, 2);
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;
}
</script> 我自己听不到，昨天在家听过的。感谢东篱大哥好礼，回个薄礼以表达谢意{:4_187:} 这图片选的太有悟性了。。。{:5_116:} 那转啊转的阴阳鱼，加深了主题，好设计。。。{:4_187:} 尽管俺极不情愿，还是把俺整到半天空上去了，快放俺下来，俺恐高啊。。。。{:4_170:} 感谢黑黑的代码@马黑黑 {:4_187:} 影子朋友早晨好！东篱朋友早晨好！
《悟》的画面上飘浮着几朵乳白色的云，像姑娘身上的轻纱，又像簇新的棉絮，在蓝天的衬托下，越发显得皎洁。好漂亮的制图啊！ 这是活学活用，与现学现用有质的区别。 @加林森 队长快来参观学习。 马黑黑 发表于 2022-9-1 12:18
这是活学活用，与现学现用有质的区别。 @加林森 队长快来参观学习。
来了来了。 加林森 发表于 2022-9-1 12:19
来了来了。
这个值得研究研究
马黑黑 发表于 2022-9-1 12:20
这个值得研究研究
好的。 东篱闲人 发表于 2022-9-1 09:49
这图片选的太有悟性了。。。
修炼的目的就是要悟呀{:4_173:} 东篱闲人 发表于 2022-9-1 09:50
那转啊转的阴阳鱼，加深了主题，好设计。。。
阴阳互易，轮转不休，世事本就如此，这也算是云端的感悟吧。 东篱闲人 发表于 2022-9-1 09:51
尽管俺极不情愿，还是把俺整到半天空上去了，快放俺下来，俺恐高啊。。。。
没事没事，那平台很结实，不会掉下去的{:4_170:} 梦油 发表于 2022-9-1 10:03
影子朋友早晨好！东篱朋友早晨好！
《悟》的画面上飘浮着几朵乳白色的云，像姑娘身上的轻纱，又像簇新的棉 ...
放了个视频上去，增加点气氛而已。谢谢梦油鼓励{:4_187:} 再来悟一下。 马黑黑 发表于 2022-9-1 12:18
这是活学活用，与现学现用有质的区别。 @加林森 队长快来参观学习。
我做了螳螂捕蝉黄雀在后，做出来效果不好，没好意思发出来，要不我还是发出来吧，昨天说起要做的{:4_173:} 醉美水芙蓉 发表于 2022-9-1 19:12
欣赏红影好制作！
多谢水芙蓉美女，不过是代码套用而已{:4_173:} 红影 发表于 2022-9-1 21:49
我做了螳螂捕蝉黄雀在后，做出来效果不好，没好意思发出来，要不我还是发出来吧，昨天说起要做的{:4_173: ...
非常好呢，别发胖