《今生的遗憾就是错过你》王爱华 DJ
本帖最后由 焱鑫磊 于 2023-5-7 20:09 编辑 <br /><br /><style type="text/css">#papa { margin: 100px -280px ; width: 1164px; height: 640px; background: url(https://pic2.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:12%;bottom:10px;width:100%;height:100px;margin:16px auto position:relative;z-index: 2}
#rdisk{position:absolute;left:12%;bottom: 10px;width:100%;height:100px;z-index: 11}
</style>
<div id="papa"title="焱鑫磊博客">
<div id="testImg">
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/645785e40d2dde57775f5320.jpg" /><img alt="" class="photo" src="https://pic2.imgdb.cn/item/645786140d2dde57775f850b.jpg" /><img alt="" class="photo"src="https://pic2.imgdb.cn/item/645786400d2dde57775fa5fd.jpg" /><img alt=""class="photo"src="https://pic2.imgdb.cn/item/645787540d2dde5777608025.jpg" /><img alt="" class="photo" src="https://pic2.imgdb.cn/item/645787af0d2dde577760d1c4.jpg" /><img alt="" class="photo" src="https://pic2.imgdb.cn/item/645787d20d2dde577760f119.jpg" /><img alt="" class="photo" src="https://pic2.imgdb.cn/item/645787f10d2dde57776109aa.jpg" /><img alt="" class="photo" src="https://pic2.imgdb.cn/item/6457880d0d2dde577761229a.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://www.joy127.com/url/104617.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 100s linear infinite;
cursor: pointer;background: url('https://pic2.imgdb.cn/item/6412e92cebf10e5d531beddb.png')0 0/80% 90%;
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 60s linear infinite;
cursor: pointer;background: url('https://pic2.imgdb.cn/item/6412e92cebf10e5d531beddb.png')0 0/80% 90%;
opacity: 1;
}
.stop #mpic1 {
animation-play-state: paused;
}
@keyframes rotet {
0%{
background-position: 0% 0%;
}
100%{
background-position: 0% 2600%;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:} 红影 发表于 2023-5-7 20:17
漂亮的制作，那些轮转图图还是透明的，仿佛人儿在翩翩起舞。焱鑫磊好帖
红影晚上好！{:4_187:}{:4_204:}{:4_176:} 焱鑫磊 发表于 2023-5-7 20:22
红影晚上好！
焱鑫磊晚上好，再赏好帖{:4_187:} 好看。欣赏点赞。 竹溪 发表于 2023-5-7 21:11
好看。欣赏点赞。
竹溪晚上好！{:4_187:} 焱鑫磊 发表于 2023-5-7 21:33
竹溪晚上好！
谢谢，晚上好。 图中的美女在不断幻化，真是神奇{:4_204:} {:4_204:}{:4_204:}{:4_204:} 樵歌 发表于 2023-5-8 06:51
图中的美女在不断幻化，真是神奇
问候樵歌早上好！{:4_187:}{:4_204:} 明月 发表于 2023-5-8 08:30
{:4_187:}{:4_187:}{:4_187:} 好美的帖，欣赏问好！{:4_187:} 梦缘 发表于 2023-5-9 10:32
好美的帖，欣赏问好！
问好！{:4_187:}{:4_187:}{:4_187:}
页:
[1]