越剧九里桑园

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

本帖最后由有声有色于 2026-6-9 15:38 编辑 <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/6a27b491edae85a6284e908b.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://pic1.imgdb.cn/item/6a27b275edae85a6284e728e.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b49cedae85a6284e9098.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b489edae85a6284e9082.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b47dedae85a6284e906f.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b472edae85a6284e906a.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b467edae85a6284e9063.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b45cedae85a6284e9058.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b44bedae85a6284e904a.gif" alt="" />

<div class="container">

<audio autoplay="" class="audio" id="MusicPlayer" src="https://upfile.mp3.wf/view.php/83fd4e9c6734c19c2855f23f53bfb3dc.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://pic1.imgdb.cn/item/66c44286d9c307b7e95b5f57.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 = `
栽梅
种竹近深闺
代代相交竹与梅
梅在竹边竹作伴
竹在梅边梅奉陪
梅欲去时难留竹
竹要相留难脱梅
梅爱竹竹贪梅
相亲相近竹与梅
思君泪湿湘妃竹
孟浩然踏雪去寻梅
炮竹一声催腊去
忽闻梅到报春回
把接风酒摆在梅亭上
与君同饮酒三杯
今朝同赏竹与梅
`;
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

越剧九里桑园