|
|
楼主 |
发表于 2026-6-10 12:46
|
显示全部楼层
帮我看看 这个代码为啥字幕放不出来
- <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" >
- <div class="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 -1px 0);
- 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 = `
- [00:18.471]栽梅
- [00:29.756]种竹近深闺
- [00:42.269]代代相交竹与梅
- [01:06.107]梅在竹边竹作伴
- [01:17.280]竹在梅边梅奉陪
- [01:36.498]梅欲去时难留竹
- [01:53.696]竹要相留难脱梅
- [02:07.345]梅爱竹 竹贪梅
- [02:15.763]相亲相近竹与梅
- [02:36.57]思君泪湿湘妃竹
- [02:45.715]孟浩然踏雪去寻梅
- [03:00.748]炮竹一声催腊去
- [03:10.922]忽闻梅到报春回
- [03:25.779]把接风酒摆在梅亭上
- [03:45.976]与君同饮酒三杯
- [03:59.118]今朝同赏竹与梅
- `;
- function $(id) {return document.getElementById(id);
- }//这样写以后getid方便
- function getLrcArray() {
- var parts = lrc.split("\n");
- for (let index = 0; index < parts.length; index++) {
- parts[index] = getLrcObj(parts[index]);
- }
- return parts;
- function getLrcObj(content) {
- var twoParts = content.split("]");
- var time = twoParts[0].substr(1);
- var timeParts = time.split(":");
- var seconds = +timeParts[1];
- var min = +timeParts[0];
- seconds = min * 60 + seconds;
- var words = twoParts[1];
- 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[index].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[index].classList.add("active");
- }
- var turn = 0;
- function getLrcIndex(){
- var time = $("MusicPlayer").currentTime + turn;
- for (var index = 0; index < lrcArray.length; index++) {
- if (lrcArray[index].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" )"
|
|
发表于 2026-6-10 11:28
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
越改越改不好