《听闻远方有你》 演唱：刘钧
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1676402">
<div style="
margin: 50px -20px;
width: 1000px;
height: 660px;
background:url(https://img.51miz.com/preview/element/00/01/40/25/P-1402558-2ECC7212.png)0 0/100%100%,linear-gradient(40deg, #000080, #ff0000, #000000, #00f000);
border-radius: 22px;
border: thick double#88abfa;
text-align: center;
z-index: 123;
">
<div class="items" >
<div class="bg">
<div id="aplay">
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWt2yq.jpg" alt=""style="width: 800px;height: 550px;-webkit-mask-image: radial-gradient(black 20% ,transparent 70%);" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWtXm6.jpg" alt="" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWtfmV.jpg" alt="" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWtj0K.jpg" alt="" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWtIkF.jpg" alt="" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWt4TU.jpg" alt="" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWtblR.jpg" alt="" />
<img class='cb-slideshow'src="https://s21.ax1x.com/2025/04/14/pEWtTfJ.jpg" alt="" />
</div></div>
<div class="BJ">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://upfile.mp3.wf/view.php/bbafe53e170ec3cae97ed28267124654.mp3" controls loop style="width: 1%;
height: 1%;z-index: 1;"></audio>
<div class="btn">
<div id="playpause"
style="
position:absolute;
top:-500px;
left:0px;
width:1000px;
height:660px;
cursor: pointer; /*游标：指针；*/
z-index: 600;
"/>
</div>
</div>
<divclass="lrc">
<ul id="ullrc">
</ul>
</div>
</div></div></div>
<style type="text/css">
.bg {
width: 800px;
height: 550px;
position: absolute;
top: 50px;
left: 100px;
overflow: hidden;
}
.cb-slideshowimg{width: 800px;
height: 550px;
position: absolute;top: 0px;
left: 0px;-webkit-mask-image: radial-gradient(black 20% ,transparent 70%);
animation: round 48s infinite;
opacity: 0;
}
.cb-slideshow #aplay{}
@keyframes round {
15% {
opacity: 1;
}
20% {
opacity: 0;
}
}
.cb-slideshow:nth-child(1) {
animation-delay: 42s;
}
.cb-slideshow:nth-child(2) {
animation-delay: 36s;
}
.cb-slideshow:nth-child(3) {
animation-delay: 30s;
}
.cb-slideshow:nth-child(4) {
animation-delay: 24s;
}
.cb-slideshow:nth-child(5) {
animation-delay: 18s;
}
.cb-slideshow:nth-child(6) {
animation-delay: 12s;
}
.cb-slideshow:nth-child(7) {
animation-delay: 6s;
}
.cb-slideshow:nth-child(8) {
animation-delay: 0s;
}
</style>
<style type="text/css">
.BJ{width: 1000px;height: 1000px;
margin: 0;position: absolute;top:500px; left:0px;z-index: 100;
}
#MusicPlayer{
width: 1000px;
height: 1000px;
display: block;
margin: 0 auto;
}
.btn{
display: block;
z-index: 300;
margin: 0;
}
.lrc{
width: 960px;
height: 180px;z-index: 1;
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:60px;
left:0px;
margin: 0 auto;
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 80px;
line-height: 90px;
font-family:悟空大字库;
font-size: 0px;
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;
}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 35px;
color: #ff0000;transform: translate(0%,0%);
font-weight: bold;
}
.audio{
z-index: 1;
bottom: 0;
opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;
top:0px;
left:0px;
}
.audio:hover{
opacity: 0;
}
</style>
<div style="position: relative;width: 500px;height: 50px;top:-700px;LEFT: 50px;z-index: 88;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#f638ef;"><span style="font-family:微软简中圆;"><span style="font-size:32px;">《听闻远方有你》</span></span></span></p></div>
<div style="position: relative;width: 500px;height: 50px;top:-730px;LEFT: 320px;z-index: 99;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#386df6;"><span style="font-family:微软简中圆;"><span style="font-size:20px;"> 演唱：刘 钧</span></span></span></p></div>
<div style="position: relative;width: 500px;height: 50px;top:-220px;LEFT: 780px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>
<style type="text/css">
.items{ z-index: 1540;animation: slider 3s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(120%)brightness(100%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(110%)brightness(100%);}}
</style>
<script >
var 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 = 80, lrc_ul_height = 90;
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://chuangshicdn.data.mvbox.cn/album/22/08/12/22081218443640171058.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://chuangshicdn.data.mvbox.cn/album/22/08/12/22081218423650143637.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="cb-slideshow ";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>
</td></tr></table>
<DIV style="HEIGHT: 50px"> 欣赏了 感谢老师分享 欣赏老师的精美音画！{:4_199:} 流水光阴 发表于 2025-4-14 15:36
欣赏了
谢谢流水光阴老师欣赏！{:4_190:} 流水光阴 发表于 2025-4-14 15:36
感谢老师分享
祝欣赏愉快！{:4_176:} 梦江南 发表于 2025-4-14 16:08
欣赏老师的精美音画！
谢谢梦江南老师欣赏！{:4_190:} 前辈晚上好，你这个帖没有居中，看见上面溢出码你没有去了 不知道为什么我复制了代码在电脑预览改了居中代码出来整个下面的位置就不对了 小辣椒 发表于 2025-4-14 21:48
前辈晚上好，你这个帖没有居中，看见上面溢出码你没有去了
我去修改代码试试！{:4_189:} 小辣椒 发表于 2025-4-14 21:52
不知道为什么我复制了代码在电脑预览改了居中代码出来整个下面的位置就不对了
问好！{:4_187:} 小辣椒 发表于 2025-4-14 21:48
前辈晚上好，你这个帖没有居中，看见上面溢出码你没有去了
刚刚我去掉溢出码保存后，再点击编辑按钮。就不能进入代码修改操作了！晕。。。{:4_170:} 变色的图片轮播，特别漂亮呢。
欣赏亦是金老师好帖{:4_199:} 亦是金 发表于 2025-4-14 22:11
刚刚我去掉溢出码保存后，再点击编辑按钮。就不能进入代码修改操作了！晕。。。
我来帮您修改一下试试。。。 不行，改完图片居中了，但文字右下角的红色文字还是原位置，跑到图外了。我不知道怎么调，还是帮您恢复原样了{:4_173:} 音画唯美
歌声动听
制作大气
音画合一，音乐与画面结合完美
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
页:
[1]
2