《爱到深处你却不在》郭欢
本帖最后由 焱鑫磊 于 2023-6-28 11:27 编辑 <br /><br /><style type="text/css">#papa { margin: 120px -280px ; width: 1164px; height: 640px; background: url(https://pic.imgdb.cn/item/6412e67aebf10e5d530a990b.gif)0 0/10%10%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
.lyricDisp{font: bold 2.5em华文隶书, sans-serif; transition:.3s all ease;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:#FF0000;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color:#000080;text-align:center;font-size:2.5em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:20%;bottom:10px;width:100%;height:100px;margin:16px auto position:relative;z-index: 2}
#rdisk{position:absolute;left:20%;bottom:10px;width:100%;height:100px;z-index: 11}
</style>
<div id="papa"title="焱鑫磊博客">
<div id="testImg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6466cac10d2dde577742ddff.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/6466cadf0d2dde577743009a.jpg" /><img alt="" class="photo"src="https://pic.imgdb.cn/item/6466cafb0d2dde5777431ea0.jpg" /><img alt=""class="photo"src="https://pic.imgdb.cn/item/6466cb170d2dde5777433f16.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/6466cb3a0d2dde57774366c0.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/6466cb540d2dde5777437fe0.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/6466cb6f0d2dde5777439a38.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/6466cb8a0d2dde577743b632.jpg" />
<div id="mpic"></div>
<div id="mpic1" ></div>
</div>
<div id="rdisk" title="暂停/播放"><ptype="button"value="*" id="testBtn" style="width: 100%; height: 100%;position:absolute;-webkit-background-clip : text;"></p></div>
<div id="LRCShow" >
<div class="lyricDisp">焱鑫磊博客</div><div class="lyricDisp"></div>
</div>
</div>
<textarea id="lrc_content" style="visibility: hidden;">
《爱到深处你却不在》郭欢
词：周兵 曲：陈伟
LRC歌词制作：焱鑫磊
我想送给你一朵云彩
轻轻飘进落在你心怀
虽然我们相隔千里外
思念却永远停不下来
我想陪着你不愿离开
数着星星看月色皎白
当我再次从梦中醒来
寂寞如花在黑夜盛开
啊爱到深处 你却不在
所有温柔都为你等待
穿过长长时光 时光的河流
我依然对你痴情不改
啊情到深处 你却不在
愿用余生换所有期待
纵然化作小小 小小的蝴蝶
也要飞过爱的沧海
我想陪着你不愿离开
数着星星看月色皎白
当我再次从梦中醒来
寂寞如花在黑夜盛开
啊爱到深处 你却不在
所有温柔都为你等待
穿过长长时光 时光的河流
我依然对你痴情不改
啊情到深处 你却不在
愿用余生换所有期待
纵然化作小小 小小的蝴蝶
也要飞过爱的沧海
纵然化作小小 小小的蝴蝶
也要飞过爱的沧海
</textarea>
<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lrcVec=new Array();this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=this.showLrcObj.getElementsByTagName('div');this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;that.mObj.play()});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}}}
</script>
<script type="text/javascript">
var opts = {// 下面4个参数是必须的！
lrcTxtID:'lrc_content',
lrcShowID:"LRCShow",
audioURL:"https://i.mp3.wf/view.php/ea11d090f60c31802a07ef5c06b26fa0.mp3",
audioCtrl:'rdisk'
};
new lrcPlayer2(opts);
</script>
<style>
#mpic {
position: absolute;z-index: 1;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1164px;
height: 640px;
animation: rote 80s linear infinite;
cursor: pointer;background: url('https://pic.imgdb.cn/item/6487376d1ddac507cc97b2f5.png')0 0/50% 70%;
opacity: 1;
}
.stop #mpic {
animation-play-state: paused;
}
@keyframes rote {
0%{
background-position: 600% 0;
}
100%{
background-position: 30% -1600%;filter:hue-rotate(360deg)
}
}
#mpic1 {
position: absolute;z-index: 1;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1164px;
height: 640px;
animation: rotet 100s linear infinite;
cursor: pointer;background: url('https://pic.imgdb.cn/item/6487376d1ddac507cc97b2f5.png')0 0/40% 60%;
opacity: 1;
}
.stop #mpic1 {
animation-play-state: paused;
}
@keyframes rotet {
0%{
background-position: 0% 1600%;
}
100%{
background-position: 0% 0%;filter:hue-rotate(360deg)
}
}
</style>
<style>
.photo {width: 100%;
height: 100%;
position: absolute;z-index: -1;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 48s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes round {0% {opacity: 0;filter:hue-rotate(360deg)}
10% {opacity: 1;}
18% {opacity: 0;}
}
img:nth-child(8) {
animation-delay: 42s;
}
img:nth-child(7) {
animation-delay: 36s;
}
img:nth-child(6) {
animation-delay: 30s;
}
img:nth-child(5) {
animation-delay: 24s;
}
img:nth-child(4) {
animation-delay: 18s;
}
img:nth-child(3) {
animation-delay: 12s;
}
img:nth-child(2) {
animation-delay: 6s;
}
img:nth-child(1) {
animation-delay: 0s;
}
.stop img:nth-child(8){
animation-delay: 42s;animation-play-state: paused;
}
.stop img:nth-child(7){
animation-delay: 36s;animation-play-state: paused;
}
.stop img:nth-child(6){
animation-delay: 30s;animation-play-state: paused;
}
.stop img:nth-child(5){
animation-delay: 24s;animation-play-state: paused;
}
.stop img:nth-child(4){
animation-delay: 18s;animation-play-state: paused;
}
.stop img:nth-child(3){
animation-delay: 12s;animation-play-state: paused;
}
.stop img:nth-child(2){
animation-delay: 6s;animation-play-state: paused;
}
.stop img:nth-child(1){
animation-delay: 0s;animation-play-state: paused;
}
</style>
<script>
var image = document.getElementById("testImg"),
button= document.getElementById("testBtn");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '.') {
image.classList.remove('stop');
this.value = '*';
} else {
image.classList.add('stop');
this.value = '.';
}
};
}
</script> 这么多漂亮的泡泡，这个是民国美女吧，这个制作真美{:4_187:} 这个又是暂停都能停下呢。感谢焱鑫磊带来的美的享受{:4_199:} 是国民媳妇儿吧，好温油的样纸{:4_189:} 红影 发表于 2023-6-13 09:05
这么多漂亮的泡泡，这个是民国美女吧，这个制作真美
问候红影好！{:4_187:} 红影 发表于 2023-6-13 09:06
这个又是暂停都能停下呢。感谢焱鑫磊带来的美的享受
一键全停。{:4_204:} 樵歌 发表于 2023-6-13 09:53
是国民媳妇儿吧，好温油的样纸
知名模特敏敏！{:4_187:} 欣赏老师的精彩，问好！{:4_176:} 焱鑫磊 发表于 2023-6-13 14:18
问候红影好！
谢谢焱鑫磊带来的美好视听享受{:4_187:} 焱鑫磊 发表于 2023-6-13 14:19
一键全停。
是的，看到了{:4_173:} 梦缘 发表于 2023-6-13 17:42
欣赏老师的精彩，问好！
问候梦缘好！{:4_204:} 欣赏老师的精美音画，这个代码挺好看，收藏学习。谢谢！
老谟深虑 发表于 2023-6-15 16:47
欣赏老师的精美音画，这个代码挺好看，收藏学习。谢谢！
问候老朋友好！{:4_187:}
页:
[1]