《情醉心间》流苏
本帖最后由 焱鑫磊 于 2023-5-17 01:41 编辑 <br /><br /><style>#papa { margin: 90px -270px ; width: 1164px; height: 640px; background:url(https://img.fy6b.com/2023/03/10/6463d6a5501e7.jpg)0px 0px/100% 100%;;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#papa::before { position: absolute; content: '《情醉心间》流苏'; left: 30px; top: 15px; font: bold 2.4em sans-serif; color: #ff0000; text-shadow: 2px 2px 3px #000000; z-index: 6;}
#mplayer {--ww: 300px;--hh: 180px;--pinpu: linear-gradient(to top,darkgreen,snow);position: absolute;bottom: 0px;left:0px;width: var(--ww);height: var(--hh);display: flex;justify-content: center;align-items: flex-end;cursor: pointer;z-index: 10;}
.mLine {position: relative;margin: 0px 0px 0px 0px;width: 10px;height: 10px;clip-path: polygon(50% 0,0 100%, 100% 100%);background: linear-gradient(0deg, #00Ff00 8%,#fff000 80%,#fff000 80%);transition: .35s;opacity:1;}
.mLine::before { position: absolute; content: ''; width: 100%; height:2px; background: orange; top: -6px; }
#dt { position: absolute; left: 950px; bottom: 130px; width: 120px; height: 120px; background: url('https://pic.imgdb.cn/item/63979dcdb1fccdcd3655f9ee.png')0 0/100% 100%; cursor: pointer; z-index: 2; animation: rot linear 30s infinite; transform: rotateX(0deg) rotateY(0deg) rotate(0deg);}@keyframes rot {0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(20deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg)scale(2);left: 30px;}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(260deg)scale(0.2);top:30px;}
}
.photo {width: 1164px; height: 640px;
position: absolute;z-index: -2;border:2px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 48s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes round {
0% {opacity: 1;transform:rotateX(-180deg) translateZ(10.90909px);}
5% {opacity: 1;transform: perspective(600px) rotateY(45deg)scale(0.6)}
8% {opacity: 1;transform: perspective(600px) rotateY(-45deg)scale(0.6)}
12% {opacity: 1;transform: perspective(600px) rotateY(0deg)scale(0.6)}
18% {opacity: 0;transform: perspective(600px) rotateY(0deg)scale(1.8)}
}
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;}
.stop img:nth-child(1){animation-delay: 42s;animation-play-state: paused;}
.stop img:nth-child(2){animation-delay: 36s;animation-play-state: paused;}
.stopimg:nth-child(3) {animation-delay: 30s;animation-play-state: paused;}
.stop img:nth-child(4){animation-delay: 24s;animation-play-state: paused;}
.stop img:nth-child(5){animation-delay: 18s;animation-play-state: paused;}
.stop img:nth-child(6){animation-delay: 12s;animation-play-state: paused;}
.stop img:nth-child(7){animation-delay: 6s;animation-play-state: paused;}
.stop img:nth-child(8){animation-delay: 0s;animation-play-state: paused;}
#img_border{display:inline-block;width:120px;height:120px;position: absolute;top:420px; left:880px;z-index: 80;border-radius:0%; transition: .3s all ease;animation:rotating 10s linear infinite;}
@keyframes rotating{0% {transform: rotateX(0deg) rotateY(0deg)
rotateZ(0deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-30deg)scale(2);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2);}
}
</style>
<div id="papa">
<div id="testImg"><div id="texiao"><img class='photo'src="https://img.fy6b.com/2023/03/10/67f1f044d4e5d.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/03/10/137770240fafa.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/03/10/06cff030ea8e7.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/03/10/d37a3fb8ac7d6.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/03/10/0e5a6f41d150b.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/03/10/98ef3cf4a4fe8.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/03/10/251f0319eb223.jpg" alt="" />
<img class='photo'src="https://img.fy6b.com/2023/03/10/ae068665cf416.jpg" alt="" /></div></div>
<div id="mplayer"></div>
<div id="dt" ></div>
<div class="bg">
<div id="" style="width: 1164px; height: 160px;position: absolute;top:520px; left:120px;z-index: 10;">
<divclass="lrc">
<ul id="ullrc">
</ul>
</div></div>
<div type="button" id="btn"> <div id="img_border" style="width: 120px; height: 120px;background:url(https://img.fy6b.com/2023/03/10/d3376b7249de2.png)0 0/100% 100%;border-radius:0%;"></div></div>
</div>
</div>
<audio id="aud" src="https://pan.111t.net/view.php/38b4e2f8cb543c21c3fa390415e98515.mp3" loop autoplay></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],player_css: '',ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;aud.loop = false;let total = Math.ceil(mplayer.offsetWidth / 6), ppnum = 0;let mKey = 0, mFlag = true;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mplayer.offsetHeight, coe = 20/total/2, plus;let update = () => lines.forEach((item,key) => {plus = (key < total/2 ? key : total - key) * coe * 10;item.style.setProperty('height', Math.random() * (data.ypData - 30) / divide + plus + 'px');});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('ended', () => { mKey = 0; aud.play(); });aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let mState = () => aud.paused ? lrc.style.setProperty('--state','paused') : lrc.style.setProperty('--state','running');let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};};mkPlayer.HCPlayer = playCode;})(this);
let ypData = ;
HCPlayer({ypData: ypData,
player_css: '--ww: 100%; --pinpu: linear-gradient(to top,blue,lightblue); align-items: flex-end;',
});
})();
</script>
<style>
.bg{width: 1px;height: 1px;
margin: 0;position: absolute;top:0px; left:0px;z-index: 10;}
#aud{
width: 250px;
display: block;
margin: 0 auto;}
.btn{
display: block;
margin: 0;}
.lrc{
width: 960px;
height: 120px;
overflow: hidden;
display: block;position: absolute;top:0px; left:0px;
margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 45px;color: #00ff00;
text-align:center;
transform: translate(0%,0%);
font-weight: normal;-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #F32121 32%,#00ff00 43%,#FEFFFF 52%,#F32121 62%,#F32121 75%);
background-position: -1200px 0;
filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0)brightness(200%);
-webkit-animation:loop 3s linear 1.5;
}
@-webkit-keyframes loop{
0%{background-position: -1200px 0;}
100%{background-position: -0 0;}
}
</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 = 70, 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 = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');
img_border.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');
var image = document.getElementById("testImg"),
button = document.getElementById("btn");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '.') {
image.classList.remove('stop');
this.value = '*';
} else {
image.classList.add('stop');
this.value = '.';
}
};
}
</script>
漂亮的频谱制作，还有漂亮的图片轮播和歌词同步。欣赏焱鑫磊好帖{:4_199:} 红影 发表于 2023-3-10 22:46
漂亮的频谱制作，还有漂亮的图片轮播和歌词同步。欣赏焱鑫磊好帖
红影晚上好！我主要是试发代码帖。掌握一点儿规律了。谢谢指教！{:4_204:}
给我耳目一新的感觉，学习了！ 庶民 发表于 2023-3-11 05:32
给我耳目一新的感觉，学习了！
问候庶民好！{:4_204:} 焱鑫磊 发表于 2023-3-10 22:50
红影晚上好！我主要是试发代码帖。掌握一点儿规律了。谢谢指教！
直接发代码帖子，可以省去上传的麻烦，还是很不错的。 这个纯代码发帖，不错哦{:4_199:} 欣赏漂亮的制作{:4_199:} 小辣椒 发表于 2023-3-11 18:00
这个纯代码发帖，不错哦
谢谢小辣椒鼓励！适应中！{:4_176:} 小辣椒 发表于 2023-3-11 18:00
欣赏漂亮的制作
小辣椒晚上好！{:4_204:} 制作真漂亮，欣赏了 绿叶清舟 发表于 2023-3-12 11:23
制作真漂亮，欣赏了
谢谢绿叶清舟鼓励！{:4_176:} 焱鑫磊 发表于 2023-3-12 13:22
谢谢绿叶清舟鼓励！
不客气了 好漂亮的音乐贴。。。{:5_116:} 东篱闲人 发表于 2023-3-13 08:17
好漂亮的音乐贴。。。
问候东篱闲人好！{:4_204:} 焱鑫磊 发表于 2023-3-13 09:11
问候东篱闲人好！
我们一起好，都好。。。{:5_117:} 这个代码应该很复杂吧？ 东篱闲人 发表于 2023-3-13 09:49
这个代码应该很复杂吧？
东篱闲人：我在学习中。代码一般都是套用博友的。换换图片、音乐。复杂的代码还不会。 焱鑫磊 发表于 2023-3-13 09:55
东篱闲人：我在学习中。代码一般都是套用博友的。换换图片、音乐。复杂的代码还不会。
和俺一样。。。{:5_117:}
页:
[1]