今天是母亲节！献给母亲的歌《毛阿敏 - 天之大》
本帖最后由 醉美水芙蓉 于 2022-5-8 21:49 编辑 <br /><br /> <div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td <br /><br /><div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:30px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background: url(http://pan.yinhuabbs.cn/view.php/669e4d6165818a0fd0d1db0d7d32c94c.jpg)0 0/100%100%; text-align: center;">
<img class='photo'src="http://pic.yupoo.com/yzf000319/043df8b2/56420b42.jpg" alt="" />
<img class='photo'src="http://pic.yupoo.com/yzf000319/3340da0c/c44cae9e.jpg" alt="" />
<img class='photo'src="http://pic.yupoo.com/yzf000319/8c782163/70cc1108.jpg" alt="" />
<img class='photo'src=" http://pic.yupoo.com/yzf000319/672deaa5/1719090e.jpg" alt="" />
<img class='photo'src="http://pic.yupoo.com/yzf000319/bff8da6b/92f68cd0.jpg" alt="" />
<img class='photo'src="http://pic.yupoo.com/yzf000319/e832b7af/07872896.jpg" alt="" />
<img class='photo'src="http://pic.yupoo.com/yzf000319/0d0e0f5e/fbe6c12b.jpg" alt="" />
<img class='photo'src="http://pic.yupoo.com/yzf000319/e9327c9a/45123a8b.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://url.amp3a.com/kuwo.php/56177515.mp3 " controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
<div class="btn">
<img src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png"
id="playpause"style="position:absolute;top:23px;left:85px;width:40px;height:40px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);z-index: 600;"/>
</div>
<div class="img_border" id="aplay"></div>
<div class="bs" style="z-index: 300;position: absolute;top:0px; left:0px;">
<divclass="lrc">
<ul id="ullrc">
</ul>
</div></div></div>
<div id="txtBox" class="bs"style="margin: auto;color: #fff000;font-family:华文隶书;font-size: 1.2em;position: absolute;left: 20px;top: 20px; width: 950px;text-align:
center;"></div>
</div>
<style type="text/css">
.photo {width: 480px;
height: 300px; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; overflow: hidden;transform:rotate(0deg);background: url(http://pan.yinhuabbs.cn/view.php/669e4d6165818a0fd0d1db0d7d32c94c.jpg)0 0/100%100%;
position: absolute;top:120px; left:200px;z-index: 150;filter:contrast(120%)brightness(80%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(200%,0%)scale(1);}
2% {
opacity: 1;
transform:translate(200%,0%)scale(1);}
15% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
18% {
opacity: 1;
transform:translate(0%,0%)scale(0.5);}
20% {
opacity: 0;
transform:translate(0%,0%)scale(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;}
</style >
<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:-20px;}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;}
.container .btn{
display: block;
margin: 0;}
.container .lrc{
width: 960px;
height: 120px;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;position: absolute;top:-30px; left:50px;
margin: 0 auto;}
.container .lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.container .lrc #ullrc li{
height: 60px;
line-height: 30px;
font-family:华文隶书;
font-size: 35px;
color: #000078;transform: translate(0%,0%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 35px;
color: #ff0000;transform: translate(0%,0%);
font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;
z-index: 130;position: absolute;
top:-500px;opacity: 0;
left: 20px;background: url(http://pan.yinhuabbs.cn/view.php/261cde6572e757f58ddc93d63b80e34e.png)0 0/100% 100%, url(http://pan.yinhuabbs.cn/view.php/669e4d6165818a0fd0d1db0d7d32c94c.jpg)0 0/100%100%;
animation: rotating 10s linear infinite;}
@keyframes rotating {10% {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(100%);transform: scale(1)rotateZ(0deg);background-position: 0% 0%;}
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);transform: scale(2)rotateZ(0deg);background-position: 0% 0%;}
90% {opacity: 0;filter:hue-rotate(0deg)contrast(100%)brightness(100%);transform: scale(3)rotateZ(0deg);background-position: 0% 0%;}
}
</style>
<style type="text/css">.bs{animation: slider0 0.26s linear infinite ;position: absolute;top:-20px; left:0px;z-index: 1000;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 8px #CD6600) drop-shadow(0px 0px 8px #CD6600)drop-shadow(0px 0px 8px #CD6600)brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 8px #000090)drop-shadow(0px 0px 8px #000090)drop-shadow(0px 0px 8px #000090)brightness(100%);}}
</style>
<script language="javascript">
var txtBox = document.getElementById("txtBox");
var idx = 0;
var str = " 醉美水芙蓉欢迎你！ ";
setInterval(function(){
txtBox.innerHTML = str.substring(0, idx) + "➽➣";
idx += 1;
if(idx > str.length) idx = 0;
}, 300);
</script>
<script >var lrc = `毛阿敏 - 天之大
作词：陈涛
作曲：王备
LRC编辑：醉美水芙蓉
妈妈
月光之下
静静的我想你了
静静淌在血里的牵挂
妈妈
你的怀抱
我一生爱的襁褓
有你晒过的衣服味道
妈妈
月亮之下
有了你我才有家
离别虽半步即是天涯
思念何必泪眼
爱长长长过天年
幸福生于会痛的心田
天之大
唯有你的爱
是完美无瑕
天之涯
记得你用心传话
天之大
唯有你的爱
我交给了他
让他的笑像极了妈妈
天之大
唯有你的爱
是完美无瑕
天之涯
记得你用心传话
天之大
唯有你的爱
我交给了他
让他的笑像极了妈妈
让他的笑像极了妈妈
谢谢欣赏！`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 60, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("MusicPlayer").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
}
aud.addEventListener("play", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/35b530b3868a28afe2b97da37543395f.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png";
}, false);
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>
</td></tr></table>
沙发欣赏美贴 来看你 发表于 2022-5-8 21:44
沙发欣赏美贴
谢谢朋友加分支持！ 醉美水芙蓉 发表于 2022-5-8 21:45
谢谢朋友加分支持！
不客气哒，是猫儿的马甲吗 {:4_189:} 来看你 发表于 2022-5-8 21:44
沙发欣赏美贴
不成功的作品！很遗憾播放器本论坛不支持！ 醉美水芙蓉 发表于 2022-5-8 21:47
不成功的作品！很遗憾播放器本论坛不支持！
能听到啊，播放器点了也有效
水区玩播放器的可多了，都是大神级别的了 来看你 发表于 2022-5-8 21:49
能听到啊，播放器点了也有效
水区玩播放器的可多了，都是大神级别的了
谢谢朋友告知！ 谢谢芙蓉美贴，祝天下母亲节日快乐 绿叶清舟 发表于 2022-5-8 21:54
谢谢芙蓉美贴，祝天下母亲节日快乐
谢谢版主光临！母亲节快乐！ 醉美水芙蓉 发表于 2022-5-8 21:55
谢谢版主光临！母亲节快乐！
客气了，谢谢啊 漂亮的帖子，好多轮转的温馨图片。水芙蓉也是音画高手呢，这个帖子好美。借好帖同祝天下母亲节日快乐{:4_187:} 制作精美，赞！{:4_199:} 红影 发表于 2022-5-8 23:16
漂亮的帖子，好多轮转的温馨图片。水芙蓉也是音画高手呢，这个帖子好美。借好帖同祝天下母亲节日快乐{:4_18 ...
老师过奖了！我是来学习的！ 加林森 发表于 2022-5-9 11:51
制作精美，赞！
谢谢版主支持！ 醉美水芙蓉 发表于 2022-5-9 17:54
谢谢版主支持！
应该的应该的。{:4_204:} 分享精彩制作！ 岩新新 发表于 2022-5-9 19:36
分享精彩制作！
问好岩新老师！ 好作品 马黑黑 发表于 2022-5-9 21:57
好作品
老师能看见歌词同步吗？很遗憾我在这个论坛看不见，只能听声音！ 醉美水芙蓉 发表于 2022-5-9 22:00
老师能看见歌词同步吗？很遗憾我在这个论坛看不见，只能听声音！
没看到
页:
[1]
2