《 海 底 》 - 凤凰传奇
本帖最后由 亦是金 于 2024-8-25 17:58 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1882277">
<style>
#papa {
margin: 10px -310px ;
width: 1260px;
height: 700px;
background: url(http://www.kumeiwp.com/sub/filestores/2023/03/20/902c9ffed5091bc997d30e133fad8db7.gif)no-repeat 0 center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000;
position: relative;
display: grid;
place-items: center;
z-index: 10000;
overflow:hidden;
transform:rotateX(0deg) scale(1)
}
#papa:hover
#fullscreen { display:block ;}
#fullscreen {
position: absolute;
top:5%;
left:85%;
color:#FFF000;
filter:drop-shadow( 1px 1px 1px #000000);
font: normal 1.8em华文隶书;
opacity: 1;
cursor: pointer;
z-index: 11
}
</style>
<style>
.pg{ width: 100%; height:100%; left: 0%;
position: absolute;
top: 0%; z-index: 10;overflow: hidden;perspective: 3.125vmin;}
#polygon {animation: 6s linear infinite polygon;
left: 50%;
position: absolute;z-index:10;
top: 50%;
transform-style: preserve-3d;
transform: rotatex(90deg) rotatey(0deg) translatey(-10vmin);
}
@keyframes polygon {
100% {
transform: rotatex(90deg) rotatey(0deg) translatey(0);
}
}
.side {
opacity: 1;
filter:hue-rotate(10deg);
background-image: url(https://365.tf/disk/tf/1676481764.png);
background-size:25vmin 25%;
filter: hue-rotate(204deg)brightness(850%);
height: 150vmin;
position: absolute;
transform-origin: 0;
width: calc(80vmin + 1px);
}
.side:nth-child(1) {
background-position: -9.94562vmin 0;
transform: rotatey(22.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(2) {
background-position: -19.89124vmin 0;
transform: rotatey(45deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(3) {
background-position: -29.83686vmin 0;
transform: rotatey(67.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(4) {
background-position: -39.78247vmin 0;
transform: rotatey(90deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(5) {
background-position: -49.72809vmin 0;
transform: rotatey(112.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(6) {
background-position: -59.67371vmin 0;
transform: rotatey(135deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(7) {
background-position: -69.61933vmin 0;
transform: rotatey(157.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(8) {
background-position: -79.56495vmin 0;
transform: rotatey(180deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(9) {
background-position: -89.51057vmin 0;
transform: rotatey(202.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(10) {
background-position: -99.45618vmin 0;
transform: rotatey(225deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(11) {
background-position: -109.4018vmin 0;
transform: rotatey(247.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(12) {
background-position: -119.34742vmin 0;
transform: rotatey(270deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(13) {
background-position: -129.29304vmin 0;
transform: rotatey(292.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(14) {
background-position: -139.23866vmin 0;
transform: rotatey(315deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(15) {
background-position: -149.18428vmin 0;
transform: rotatey(337.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(16) {
background-position: -159.12989vmin 0;
transform: rotatey(360deg) translate3d(-50%, -50%, 25vmin);
}
</style>
<div id="papa">
<audio id="MusicPlayer" src="https://music.163.com/song/media/outer/url?id=1298437274" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: absolute;width: 300px;height: 30px;top:20px;LEFT: -150px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:40px;">《 海 底 》 </span>
<span style="color:#3d46f7;"><span style="font-size:22px;">- 凤凰传奇</span></div>
<div style="position: absolute;width: 500px;height: 50px;top:90%;LEFT: 83%;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>
</style>
</div>
<div class="pg"> <div id="bnt">
<div id="polygon"><div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div></div></div> </div>
<div class="lrc">
<div class="p"> <liid="ullrc" >
</li>
</div>
</div>
</div>
<style>
#btn{
display: block;
margin: 0 ;
}
.lrc{
width: 980px;
height: 140px;position: absolute;top:90%; left:10%;
z-index: 10;
overflow: hidden;
display: block;
margin: 0px 0px;
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 80px;
line-height: 70px;
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;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
display: block;
width: 100%;
margin: 0 auto;
}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 2.6em;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
font-weight: normal;-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image:linear-gradient(50deg, #ffff00, #ff0000, #fff000, #00ff00);
background-position: 0px 0;
-webkit-animation:loop 3s linear 2;
}
@-webkit-keyframes loop{
0%{background-position: -800px 0;filter:hue-rotate(360deg)contrast(180%)brightness(500%);}
}
</style>
<script >
var lrc = `《 海 底 》 - 凤凰传奇
作词：一支榴莲
作曲：一支榴莲/寿延
编曲: 柒 玖
歌手: 凤凰传奇
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 = 60;
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;
var image = document.getElementById("testImg"),
button = document.getElementById("bnt");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '.') {
image.classList.remove('stop');
this.value = '*';
} else {
image.classList.add('stop');
this.value = '.';
}
};
}
polygon.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('playing', () => polygon.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => polygon.style.animationPlayState = 'paused');
polygon.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>polygon.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>polygon.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>
</td></tr></table>
女声的转变了都听不出来了 绿叶清舟 发表于 2023-4-22 20:35
女声的转变了都听不出来了
玲花的声音变了，开始我也没有听出来！{:4_189:} 欣赏老师的精彩，点赞！{:4_178:} 绿叶清舟 发表于 2023-4-22 20:35
女声的转变了都听不出来了
问好绿叶清舟！谢谢欣赏！{:4_187:} 梦缘 发表于 2023-4-22 20:55
欣赏老师的精彩，点赞！
问好梦缘！谢谢欣赏！{:4_187:} 亦是金 发表于 2023-4-22 20:43
玲花的声音变了，开始我也没有听出来！
是啊变化太大了，男声还是老样子的 亦是金 发表于 2023-4-22 21:02
问好绿叶清舟！谢谢欣赏！
亦是金晚上好，不客气了 画面大气，简洁， 也是可以全屏欣赏。老师好制作{:4_178:}
这么大的动图可以上传，真的不错{:4_199:} 看了回复，原来是动图，还以为是视频呢。欣赏亦是金老师好帖{:4_187:} 醉美水芙蓉 发表于 2023-4-22 21:01
动图制作漂亮！
问好醉美水芙蓉！谢谢欣赏！{:4_187:} 小辣椒 发表于 2023-4-22 21:17
画面大气，简洁， 也是可以全屏欣赏。老师好制作
问好小辣椒！谢谢欣赏点赞加分！{:4_187:} 小辣椒 发表于 2023-4-22 21:18
这么大的动图可以上传，真的不错
是上传到酷美网盘的{:4_189:} 聆听这舒缓的旋律，有如一缕碧波滋润着心田！ 非常开心 发表于 2023-4-23 09:28
聆听这舒缓的旋律，有如一缕碧波滋润着心田！
问好非常开心！谢谢欣赏！{:4_191:} 欣赏亦是金的精美制作{:4_199:}
页:
[1]