越剧九里桑园

有声有色 发表于 2022-8-9 10:23

本帖最后由有声有色于 2025-9-6 15:49 编辑 <br /><br /><style>
.container0 {
margin: 50px -200px;
width: 1024px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #0bf46d; overflow: hidden;
height: 620px;
border: 1px solid;
background: #333 url('https://pic1.imgdb.cn/item/641d593fa682492fcc8a6a89.gif') no-repeat center/cover; overflow: hidden;
position: relative;
}

.photo {
position: absolute;top:0px; left:0px;
width: 100%;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #f1a81a;
height: 100%;transform:perspective(00px); background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("");
background-size: 0, cover;
box-sizing: border-box;preserve-3d;
animation: round 32s infinite;
opacity: 0;
}
@keyframes round {
0% {opacity: 1;transform: translateX(-503px)translateY(-100px) rotate(130deg) rotateY(-50deg) rotateX(100deg) scale(0.2);filter:hue-rotate(360deg)}

8% {opacity: 1;transform: perspective(600px) rotateY(45deg)scale(0.6)}
15% {opacity: 1;transform: perspective(600px) rotateY(-45deg)scale(0.6)}
18% {opacity: 0;transform: perspective(600px) rotateY(0deg)scale(1.8)}
}

img:nth-child(1) {animation-delay: 28s;}
img:nth-child(2) {animation-delay: 24s;}
img:nth-child(3) {animation-delay: 20s;}
img:nth-child(4) {animation-delay: 16s;}
img:nth-child(5) {animation-delay: 12s;}
img:nth-child(6) { animation-delay: 8s;}
img:nth-child(7) {animation-delay: 4s;}
img:nth-child(8) {animation-delay: 0s;}
</style>

<div class="container0">
<img class='photo'src="https://pic.imgdb.cn/item/62edcbd48c61dc3b8e218ccc.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/62edcbf08c61dc3b8e21e8b9.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/62edcc0d8c61dc3b8e223e23.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/62edcc298c61dc3b8e229696.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/62edcc488c61dc3b8e22f0ea.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/62edcc638c61dc3b8e23470a.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/62edcd0d8c61dc3b8e257aec.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/62edcbae8c61dc3b8e2116f1.jpg" alt="" />

<div class="container">

<audio autoplay="" class="audio" id="MusicPlayer" src="http://link.hhtjim.com/kw/4347214.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="items1"style="transform: scale(.55);position: absolute;top:-130px; left:750px;z-index: 70;">
<div class="img_border" id="aplay" style="width: 150px; height: 150px;background: url(https://pic.imgdb.cn/item/62848f6e09475431292827c0.gif)-30px 0px/160% 100%;position: absolute;top:70px; left:40px;z-index: 20;border-radius:50%;border:85px solid #800000; box-shadow: 0px 0px 5px #ffffff;"></div><P id="picBtn" class=""style="width: 450px; height: 450px;position: absolute;top:-30px; left:0px;background: url('') 0 0/100% 100%;z-index: 20;"></p></div>

<div class="items" >
<divclass="lrc">
   <ul id="ullrc">
      </ul>
   </div>
</div>
</div>

<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:-30px;z-index: 550;
}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.container .btn{
display: block;
margin: 0;
}
.container .lrc{
width: 960px;
height: 180px;z-index: 550;
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:0px;
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: 80px;
line-height: 90px;
font-family:悟空大字库;
font-size: 0px;
color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
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: 40px;
color: #ff0000;
font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:400px;height:400px;margin:0px ;position: absolute;text-align: center;}
.container .img_border #aplay{ }
.container .z360z{ width:400px;height:400px;animation: rot 10s linear infinite;}@keyframes rot{0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);}
}
.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>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>

<style type="text/css">.items1{ animation: slider1 1s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(80%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);}}
</style>
<script >var lrc = `越剧九里桑园[Dj----_Remix
走啊
路遇大姐得音讯
九里桑园访兰英
行过三里桃花渡
走过六里杏花村
七宝凉宁来穿过
九里桑园面前存
但见那边围竹篱
中间一对木头门
待我上前把门推
为什么青天白日门关紧
听得内边无声响
不见娘子枉费心
屋旁还有纸窗在
我隔窗向内看分明
啊呀窗口高来看不见
哦有了垫块石头就看得清
文秀举目向内望
只见一间小草房
小小香台朝上摆
破木交椅分两旁
三支清香炉中插
荤素菜肴桌上放
第一碗白鲞红炖天堂肉
第二碗油煎鱼儿扑鼻香
第三碗香荀蘑菇炖豆腐
第四碗白菜香干炒千张
第五碗酱烧胡桃浓又浓
第六碗酱油花椒醉花生
白饭一碗酒一杯
桌上筷子有一双
啊呀看起来
果然为我做三周年
感谢你娘子情意长`;
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 language="javascript">

var mu = document.getElementById('MusicPlayer');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('http://pan.yinhuabbs.cn/view.php/6849264b2d30ed1a053a208960fd4217.png')0 0/100% 100%") : (mu.pause(), btn.style.background="url('http://pan.yinhuabbs.cn/view.php/cf946a6cf4e140cd29f4e757fd291bec.png')0 0/100% 100%");
}

mu.addEventListener("ended", function(){
   btn.style.background="url('http://pan.yinhuabbs.cn/view.php/cf946a6cf4e140cd29f4e757fd291bec.png')0 0/100% 100%";
})

</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>

</div>
<div id="comment_1647266" class="cm">
</div>

<h3 class="psth xs1"><span class="icon_ring vm"></span>评分</h3>
<dl id="ratelog_1647266" class="rate">
<dd style="margin:0">
<div id="post_rate_1647266"></div>
<table class="ratl">
<tr>
<th class="xw1" width="120"><a href="forum.php?mod=misc&action=viewratings&tid=61231&pid=1647266" onclick="showWindow('viewratings', this.href)" title="查看全部评分"> 参与人数 <span class="xi1">2</span></a></th><th class="xw1" width="80">威望 <i><span class="xi1">+65</span></i></th>
<th class="xw1" width="80">金钱 <i><span class="xi1">+130</span></i></th>
<th class="xw1" width="80">经验 <i><span class="xi1">+65</span></i></th>
<th>
<a href="javascript:;" onclick="toggleRatelogCollapse('ratelog_1647266', this);" class="y xi2 op">收起</a>
<i class="txt_h">理由</i>
</th>
</tr>
<tbody class="ratl_l"><tr id="rate_1647266_7532">
<td>
<a href="home.php?mod=space&uid=7532" target="_blank"><img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/75/32_avatar_small.jpg" onerror="this.onerror=null;this.src='https://www.huachaowang.com/uc_server/images/noavatar_small.gif'" /></a> <a href="home.php?mod=space&uid=7532" )"

红影发表于 2022-8-9 10:29

真漂亮的制作。欣赏有声有色好帖{:4_187:}

有声有色 发表于 2022-8-9 10:39

红影发表于 2022-8-9 10:29
真漂亮的制作。欣赏有声有色好帖

谢谢支持这段是否能听到声音与歌词

樵歌发表于 2022-8-9 10:54

画面精美，但没声音。

有声有色 发表于 2022-8-9 11:14

樵歌发表于 2022-8-9 10:54
画面精美，但没声音。

也唱词吗

红影发表于 2022-8-9 20:29

有声有色发表于 2022-8-9 10:39
谢谢支持这段是否能听到声音与歌词

不能。
前面以为是单位局域网的问题，现在在家里也听不到。

东篱闲人 发表于 2022-8-9 22:20

桑园访妻，棒棒的！{:5_116:}

有声有色 发表于 2022-8-10 08:20

红影发表于 2022-8-9 20:29
不能。
前面以为是单位局域网的问题，现在在家里也听不到。

看来代码的修改

有声有色 发表于 2022-8-10 08:21

东篱闲人发表于 2022-8-9 22:20
桑园访妻，棒棒的！

谢谢支持

红影发表于 2022-8-10 18:23

有声有色发表于 2022-8-10 08:20
看来代码的修改

可能是我这里的个别问题的吧。

有声有色 发表于 2022-8-11 08:03

红影发表于 2022-8-10 18:23
可能是我这里的个别问题的吧。

有可能现在浏览器不同出来的功效也不同

红影发表于 2022-8-11 21:49

有声有色发表于 2022-8-11 08:03
有可能现在浏览器不同出来的功效也不同

嗯嗯，我的电脑比较旧，是我自己的问题的可能性比较大。

页: [1]

花潮论坛's Archiver

越剧九里桑园