红尘不如戏
本帖最后由 醉美水芙蓉 于 2022-7-24 08:56 编辑 <br /><br /><div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background-size: 100% 100%;background-image: url(https://s1.ax1x.com/2022/07/24/jXjO39.png); text-align: center;"><div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=229163215.mp3" loop=""></audio>
<div class="btn">
<button id="bf" onclick="bf();">暂停</button>
<button id="bf" onclick="rbf();">重新播放</button>
</div>
<div class="img_border" id="aplay" style="width: 1000px; height: 600px;position: absolute;top:-500px; left:0px;"><div class="bj"> <img class='photo'src="https://s1.ax1x.com/2022/07/09/jDshgH.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/09/jDsWCD.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/09/jDscE6.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/09/jDsgUK.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/09/jDsyHx.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/09/jDssD1.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/09/jDsruR.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/09/jDsyHx.jpg" alt="" />
</div>
<div class="items" style="text-align:center;position:absolute;top:100px;left:280px;z-index: 200;transform:perspective(500px) rotateY(-6deg)rotateX(2deg)scale(0.6)">
<div class="lrc">
<ul id="ullrc">
</ul>
</div></div>
</div>
</div>
<style type="text/css">.bj{width: 510px; height: 320px;box-shadow: 0px 0px 0px 2px #000000, 0px 0px 5px 10px #cccccc;background: linear-gradient(45deg, #031EED 15%,#FF002A 86%);position: absolute;top:130px; left:420px;transform: perspective(490px) rotateY(-190deg)rotateX(4deg)scale(1);opacity: 0.9;border-radius:0.02%;z-index: 100;}
.photo {width: 510px; height: 320px;position: absolute;top:0px; left:0px;
animation: round 48s infinite;
opacity: 0;}
@keyframes round {28% {
opacity: 0;transform:translate(0%,0%)scale(1);
}
4% {
opacity: 1;transform:translate(0%,0%)scale(1);
}
}
img:nth-child(1) {animation-delay: 42s;}
img:nth-child(2) {animation-delay: 36s;}
img:nth-child(3) {animation-delay: 30s;}
img:nth-child(4) {animation-delay: 24s;}
img:nth-child(5) {animation-delay: 18s;}
img:nth-child(6) {animation-delay: 12s;}
img:nth-child(7) {animation-delay: 6s;}
img:nth-child(8) {animation-delay: 0s;}
</style >
<style type="text/css">
.container{
width: 400px;position: absolute;top:500px; left:0px;
}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.container .btn{
display: block;z-index: 300;
margin: 0px 0px;position: absolute;top:40px; left:80px;
}
.container .lrc{
width: 870px;
height: 140px;
overflow: hidden;filter:drop-shadow(#FFF000 1px 0 0)drop-shadow(#FFF000 0 1px 0)drop-shadow(#FFF000 -1px 0 0) drop-shadow(#FFF000 0 -1px0);
display: block;position: absolute;top:420px; left:210px;
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: 60px;
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;
}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 45px;
color: #ff0000;transform: translate(0%,0%);
font-weight: bold;
}
/*动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:-500px; left:0px;}
.container .img_border #aplay{border:12px solid #000000;border-radius:0%; }
.container .z360z{animation: rotating 40s linear infinite;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313512556895204.gif)0 0/50%50%,url(http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313224507420082.gif)0 0/50%50%,url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031215361105663728.gif)0 0/100%100%;}@keyframes rotating{from {filter:hue-rotate(0deg)contrast(120%)brightness(110%);}
to {filter:hue-rotate(60deg)contrast(110%)brightness(100%);}}
.audio{
z-index: 0;
bottom: 0;
opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
box-shadow:0px 0px 0px 2px #000000;
border-radius:25%;position: absolute;top:480px; left:220px;
}
.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>
<script>var lrc =`作词：十二兄
作曲：孙长磊_Sun
曲未终人已散去红尘不如戏
春花谢秋月了难如意
与你一见欢喜
与你一别云泥
烟火里亏欠我白首不离
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 = 70;
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>
function rbf() {
var audio = document.getElementById('MusicPlayer');
var bf=document.getElementById("bf");
audio.currentTime = 0;
audio.play();
bf.innerText="暂停";
}
function bf() {
var audio = document.getElementById('MusicPlayer');
var bf=document.getElementById("bf");
if (audio !== null) {
if (audio.paused) {
audio.play(); //audio.play();// 这个就是播放
bf.innerText="暂停";
} else {
audio.pause(); // 这个就是暂停
bf.innerText="播放";
}
}
}
</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></div>
为什么帖子都有这样的句子呢：
本帖最后由 醉美水芙蓉 于 2022-7-24 08:34 编辑
[*i=s] 本帖最后由 醉美水芙蓉 于 2022-7-24 08:34 编辑 [*/i] 马黑黑 发表于 2022-7-24 08:44
[*i=s] 本帖最后由 醉美水芙蓉 于 2022-7-24 08:34 编辑 [*/i]
不知道为什么，不是一次性发出了就有了！ 醉美水芙蓉 发表于 2022-7-24 08:46
不知道为什么，不是一次性发出了就有了！
修改过都有记录信息，但我们的不一样，没有我给出的 i=s 之类的 ubb 代码 欣赏佳作，问候芙蓉。 梦油 发表于 2022-7-24 09:55
欣赏佳作，问候芙蓉。
问候老师早上好！ 又像看投影一样的，水芙蓉真漂亮的制作{:4_187:} 醉美水芙蓉 发表于 2022-7-24 09:58
问候老师早上好！
芙蓉朋友早上好！谢谢你的美好问候。 每次都得特别漂亮！{:4_187:} 马黑黑 发表于 2022-7-24 08:44
[*i=s] 本帖最后由 醉美水芙蓉 于 2022-7-24 08:34 编辑 [*/i]
我也是发现，还有那个谁，每个帖都有这个编辑记号，而且是手机编辑 小辣椒 发表于 2022-7-24 11:29
我也是发现，还有那个谁，每个帖都有这个编辑记号，而且是手机编辑
手机编辑帖子辛苦的 红影 发表于 2022-7-24 10:28
又像看投影一样的，水芙蓉真漂亮的制作
问候红影美女中午好！ 小辣椒 发表于 2022-7-24 11:29
我也是发现，还有那个谁，每个帖都有这个编辑记号，而且是手机编辑
辣椒美女中午好！ 樵歌 发表于 2022-7-24 11:26
每次都得特别漂亮！
问候樵歌中午好！ 醉美水芙蓉 发表于 2022-7-24 11:48
问候红影美女中午好！
问好水芙蓉，周日快乐{:4_204:} 还挺漂亮的。怎么又把我卡起来了？{:4_203:} 加林森 发表于 2022-7-24 17:55
还挺漂亮的。怎么又把我卡起来了？
队长电脑容量太小了！ 醉美水芙蓉 发表于 2022-7-24 20:18
队长电脑容量太小了！
不对的，我的硬盘是1个T的，内存8个G的。不应该这样的啊。 创意好！{:5_116:}
页:
[1]
2