相思入画---借千羽美图祝大喵咪生日快乐
<style type="text/css">#papa { margin: 10px -300px ; width: 1164px; height: 640px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.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/643d1ed80d2dde577735d266.jpg " /><img alt="" class="photo" src="https://pic.imgdb.cn/item/64afee901ddac507cce251b7.jpg" /><img alt="" class="photo"src="https://pic.imgdb.cn/item/64afef0f1ddac507cce4a850.jpg" /><img alt=""class="photo"src="https://pic.imgdb.cn/item/64afef571ddac507cce5ef36.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/64afefaa1ddac507cce76d05.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/64afeff11ddac507cce8a38c.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/64aff0481ddac507ccea1d5e.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/64aff0b11ddac507ccec015b.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.qqmc.com/mp3/music212183703.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('http://pan.yinhuabbs.cn/view.php/002029cebf9f2d674ef742b5037eda30.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('http://pan.yinhuabbs.cn/view.php/002029cebf9f2d674ef742b5037eda30.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_177:} 红影 发表于 2023-7-13 21:03
这还是好多个美图呢，是羽儿美图的集合啊。水芙蓉美女的贺帖好精彩。同祝猫猫生日快乐
红影美女晚上好！同祝猫咪生日快乐！ 很美，很好听。。。{:4_204:} 这个代码好，变化自然。。 东篱闲人 发表于 2023-7-13 21:16
很美，很好听。。。
东篱老师晚上好！ 醉美水芙蓉 发表于 2023-7-13 21:15
红影美女晚上好！同祝猫咪生日快乐！
这么好的礼物，我来帮着艾特一下猫猫{:4_173:}@大猫咪 祝猫咪生日快乐！ 借美帖同贺猫猫生日快乐！ 小文 发表于 2023-7-13 21:44
祝猫咪生日快乐！
小文晚上好！ 小辣椒 发表于 2023-7-13 21:59
借美帖同贺猫猫生日快乐！
谢谢小辣椒美女光临！同祝猫咪生日快乐！ 这么多美少女围绕猫咪转悠，他还不得开心疯了{:4_189:} 樵歌 发表于 2023-7-14 07:03
这么多美少女围绕猫咪转悠，他还不得开心疯了
樵歌早上好！ 这个帖子美观大气上档次！ 这首相思入画，词好曲好听。收藏了，以后有用。谢谢{:4_173:} 醉美水芙蓉 发表于 2023-7-14 07:04
樵歌早上好！
芙蓉美女早上好{:4_187:} 哇 制作真漂亮{:4_187:} 歌美图靓！谢谢芙蓉美帖！太棒了！意境唯美，很有诗意的一首歌 ...
沉醉在这种醉人的氤氲中。听呆了{:5_106:}{:4_204:}
也祝芙蓉！幸福平安，万事如意！一切安好！
{:4_204:}{:4_199:}{:4_191:}{:4_187:}
红影 发表于 2023-7-13 21:03
这还是好多个美图呢，是羽儿美图的集合啊。水芙蓉美女的贺帖好精彩。同祝猫猫生日快乐
谢谢红影{:4_187:} 一起欣赏芙蓉精彩美帖，{:4_176:} 小文 发表于 2023-7-13 21:44
祝猫咪生日快乐！
谢谢小文朋友！{:4_204:}{:4_176:}祝朋友岁岁长欢愉，万事皆胜意！
{:5_150:}{:4_176:} 东篱闲人 发表于 2023-7-13 21:16
很美，很好听。。。
恩 非常棒！和老头一起欣赏 {:4_179:}继续温暖{:4_179:}
页:
[1]
2