测试有声有色老师的代码《栽梅》
本帖最后由 梦江南 于 2026-6-11 08:30 编辑 <br /><br /><style>.container0 {
margin: 50px 0;
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;
position: relative;
margin:50px auto 40px calc(50% - 593px);
.photo {
position: absolute;
top:0px;
left:0px;
width: 100%;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #f1a81a;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
background-size: cover;
box-sizing: border-box;
animation: round 32s infinite;
opacity: 0;
&:nth-child(1) {animation-delay: 28s;}
&:nth-child(2) {animation-delay: 24s;}
&:nth-child(3) {animation-delay: 20s;}
&:nth-child(4) {animation-delay: 16s;}
&:nth-child(5) {animation-delay: 12s;}
&:nth-child(6) { animation-delay: 8s;}
&:nth-child(7) {animation-delay: 4s;}
&:nth-child(8) {animation-delay: 0s;}
}
.container{
width:960px;
height:180px;
margin:0;
position:absolute;
top:420px;
left:30px;
z-index:550;
background-color:transparent;
border:none;
.items{
z-index:1540;
animation:slider 0.26s linear infinite;
.lrc{
width:100%;
height:100%;
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 -1px 0);
position:relative;
top:0;
left:0;
#ullrc {
width:100%;
padding:0;
list-style:none;
transition:0.3s all ease;
margin:0;
/* 歌词普通样式 */
li{
height:80px;
line-height:90px;
font-family:悟空大字库;
font-size:24px; /* 这里从0改成24，能看见了 */
color:#ffff00; /* 黄色更显眼 */
font-weight:normal;
transition:.3s all ease;
text-align:center;
/* 高亮歌词 */
&.active{
font-size:46px;
color:#ff0000;
font-weight:bold;
}
}
}
}
}
.items1{
animation:slider1 1s linear infinite;
transform: scale(.55);position: absolute;top:-130px; left:750px;z-index: 70;
/* 光碟旋转 */
.img_border{
display:inline-block;
text-align:center;
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;
}
#picBtn {
width:450px;height:450px;position:absolute;top:-30px;left:0px;
background:url('https://i.uik.cc/view.php/cf946a6cf4e140cd29f4e757fd291bec.png') no-repeat center/cover;z-index:75;
}
}
.audio{
z-index:1;
opacity:0;
width:1px;
height:1px;
position:absolute;
}
}
}
.z360z{
width:400px;
height:400px;
animation:rot 10s linear infinite;
}
@keyframes rot{
0% {transform: rotateZ(0deg);}
100% {transform: rotateZ(360deg);}
}
@keyframes slider{
from {filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {filter:hue-rotate(180deg)contrast(140%)brightness(150%);}
to {filter:hue-rotate(0deg)contrast(140%)brightness(100%);}
}
@keyframes slider1{
from {filter:hue-rotate(360deg);}
to {filter:hue-rotate(0deg);}
}
@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)}
}
</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:1px;height:1px;z-index:1;"></audio>
<div class="items1" >
<div class="img_border" id="aplay" ></div>
<p id="picBtn" style=""></p>
</div>
<div class="items" >
<div class="lrc">
<ul id="ullrc"></ul>
</div>
</div>
</div>
</div>
<script>
var lrc = `
栽梅
种竹近深闺
代代相交竹与梅
梅在竹边竹作伴
竹在梅边梅奉陪
梅欲去时难留竹
竹要相留难脱梅
梅爱竹 竹贪梅
相亲相近竹与梅
思君泪湿湘妃竹
孟浩然踏雪去寻梅
炮竹一声催腊去
忽闻梅到报春回
把接风酒摆在梅亭上
与君同饮酒三杯
今朝同赏竹与梅
`;
function $(id) {
return document.getElementById(id);
}
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 = parseFloat(timeParts) || 0;
var min = parseInt(timeParts) || 0;
seconds = min * 60 + seconds;
var words = twoParts || "";
return {
seconds: seconds,
words: words.trim()
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
var ul = $("ullrc");
ul.innerHTML = "";
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
ul.appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index < 0) return;
var liHeight = 80;
var ulHeight = 180;
var top = index * liHeight - ulHeight / 2 + liHeight / 2;
if (top < 0) top = 0;
$("ullrc").style.marginTop = -top + "px";
var allLi = $("ullrc").getElementsByTagName("li");
for (var n = 0; n < allLi.length; n++) {
allLi.classList.remove("active");
}
if (allLi) allLi.classList.add("active");
}
function getLrcIndex() {
var time = $("MusicPlayer").currentTime;
for (var n = 0; n < lrcArray.length; n++) {
if (lrcArray.seconds > time) {
return n - 1;
}
}
return lrcArray.length - 1;
}
$("MusicPlayer").ontimeupdate = setPosition;
var mu = document.getElementById('MusicPlayer');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
if(mu.paused){
mu.play();
btn.style.background = "url('https://i.uik.cc/view.php/6849264b2d30ed1a053a208960fd4217.png') 0 0 / 100% 100%";
}else{
mu.pause();
btn.style.background = "url('https://i.uik.cc/view.php/cf946a6cf4e140cd29f4e757fd291bec.png') 0 0 / 100% 100%";
}
}
mu.addEventListener("ended", function(){
btn.style.background = "url('https://i.uik.cc/view.php/cf946a6cf4e140cd29f4e757fd291bec.png') 0 0 / 100% 100%";
});
var my_audio = document.getElementById("MusicPlayer");
my_audio.onended = function(){
document.getElementById("aplay").className = "img_border";
};
my_audio.onplaying = function(){
document.getElementById("aplay").className = "img_border z360z";
};
my_audio.onpause = function(){
document.getElementById("aplay").className = "img_border";
};
</script>
还是不行https://s3.bmp.ovh/2026/06/11/UIK8BasU.png 有声有色 发表于 2026-6-11 08:32
还是不行
我这里看很正常了。 梦江南 发表于 2026-6-11 08:33
我这里看很正常了。
是吗应该有8张图片轮换的 现在图片也不动 有声有色 发表于 2026-6-11 08:43
是吗应该有8张图片轮换的 现在图片也不动
在轮回转啊 梦江南 发表于 2026-6-11 08:47
在轮回转啊
没有 看到最后还是那张图 有声有色 发表于 2026-6-11 08:49
没有 看到最后还是那张图
这是怎么回事呢？ 梦江南 发表于 2026-6-11 08:54
这是怎么回事呢？
https://hwmov.a.yximgs.com/upic/2026/06/11/08/BMjAyNjA2MTEwODU4MTRfODk4OTU4MThfMTk4NTE1NDcyMjYwXzJfMw==_b_Bfa56723aa7e184d29c8b143de60ed241.mp4
梦江南 发表于 2026-6-11 08:54
这是怎么回事呢？
我给录制的 我这里看着正常啊，漂亮的图片轮播，播放很流畅{:4_204:} 红影 发表于 2026-6-11 13:21
我这里看着正常啊，漂亮的图片轮播，播放很流畅
可是有声老师看不到。 这个制作图片还会转换，漂亮{:4_199:}
页:
[1]