《若把你》Kirsty刘瑾睿 TO：小辣椒

焱鑫磊 发表于 2023-9-3 22:40

本帖最后由焱鑫磊于 2023-9-3 22:36 编辑 <br /><br /><style>
#papa { margin: 100px -300px ; width: 1200px; height: 750px; background:url(https://pic.imgdb.cn/item/64f4985a661c6c8e541a4c9e.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: '《若把你》Kirsty刘瑾睿'; 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: 1200px; height: 750px;
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://pic.imgdb.cn/item/64f4971f661c6c8e541a1fdd.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64f49701661c6c8e541a1bb7.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64f496e2661c6c8e541a17f3.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64f496c3661c6c8e541a1463.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64f496a9661c6c8e541a1070.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64f4968a661c6c8e541a0c77.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64f4966b661c6c8e541a0911.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64f49635661c6c8e5419f66c.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:470px; left:0px;z-index: 10;">
<divclass="lrc">
   <ul id="ullrc">
      </ul>
</div></div>
<div type="button" id="btn"> <div id="img_border" style="width: 80px; height: 80px;background:url(https://pic2.imgdb.cn/item/6412faecebf10e5d5357f0ef.png)0 0/100% 100%;border-radius:0%;"></div></div>
</div>
   </div>
   <audio id="aud" src="https://i.mp3.wf/view.php/79697609c6e0c9aeb978abcb8731af87.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:150px; left:70px;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 = `《若把你》
词/曲/演唱 : Kirsty刘瑾睿
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>

红影发表于 2023-9-4 09:36

又是这么多漂亮的小MM呢。欣赏焱鑫磊好帖，@小辣椒亲爱的收礼开心{:4_187:}

红影发表于 2023-9-4 09:37

很漂亮的频谱，还有一只小伞飘飞，真漂亮{:4_204:}

非常开心 发表于 2023-9-4 10:16

制作非常漂亮赞一下{:4_204:}

焱鑫磊 发表于 2023-9-4 11:59

红影发表于 2023-9-4 09:36
又是这么多漂亮的小MM呢。欣赏焱鑫磊好帖，@小辣椒亲爱的收礼开心

小MM多多，库里放不下了。出库.......{:4_196:}

焱鑫磊 发表于 2023-9-4 12:00

红影发表于 2023-9-4 09:37
很漂亮的频谱，还有一只小伞飘飞，真漂亮

这首歌曲是不是很有韵味？

焱鑫磊 发表于 2023-9-4 12:01

非常开心发表于 2023-9-4 10:16
制作非常漂亮赞一下

向你问好！{:4_187:}

红影发表于 2023-9-4 12:51

焱鑫磊发表于 2023-9-4 11:59
小MM多多，库里放不下了。出库.......

是应该出来转转，给大家带来好心情{:4_173:}

红影发表于 2023-9-4 12:52

焱鑫磊发表于 2023-9-4 12:00
这首歌曲是不是很有韵味？

很特别，是头一次听到呢{:4_187:}

焱鑫磊 发表于 2023-9-4 12:59

红影发表于 2023-9-4 12:51
是应该出来转转，给大家带来好心情

必须的，逐渐推出！耐心等待！{:4_204:}

红影发表于 2023-9-4 14:18

焱鑫磊发表于 2023-9-4 12:59
必须的，逐渐推出！耐心等待！

辛苦了{:4_187:}

小辣椒 发表于 2023-9-4 21:20

红影发表于 2023-9-4 09:36
又是这么多漂亮的小MM呢。欣赏焱鑫磊好帖，@小辣椒亲爱的收礼开心

啊~~~有礼物，谢谢亲爱的呼叫

小辣椒 发表于 2023-9-4 21:22

谢谢焱鑫磊的精美礼物，小辣椒现在上来就匆匆忙忙，回帖都来不及，就下了，不好意思，收礼来迟{:4_171:}

小辣椒 发表于 2023-9-4 21:32

欣赏精彩的制作，图片转换流畅自如，N年前，小辣椒也是喜欢玩特效音画加播放器，那个时候的代码现在都不能用了，曾经做过一个走进西藏的特效音画，上去自己PS的十几个西藏图图，是我玩特效中最喜欢的一个，但现在这些代码都不能用，当时师父在红网任管理员我也是去发了，现在去看看都不显示了。但源码和图图我一直保存着。

红影发表于 2023-9-4 21:46

小辣椒发表于 2023-9-4 21:20
啊~~~有礼物，谢谢亲爱的呼叫

亲爱的收礼开心{:4_204:}

焱鑫磊 发表于 2023-9-14 18:30

小辣椒发表于 2023-9-4 21:32
欣赏精彩的制作，图片转换流畅自如，N年前，小辣椒也是喜欢玩特效音画加播放器，那个时候的代码现在都不能 ...

我学习制作，别嫌弃哦！{:4_187:}

焱鑫磊 发表于 2023-9-14 18:31

小辣椒发表于 2023-9-4 21:22
谢谢焱鑫磊的精美礼物，小辣椒现在上来就匆匆忙忙，回帖都来不及，就下了，不好意思，收礼来迟

送礼物，祝好！{:4_204:}

小辣椒 发表于 2023-9-14 21:19

焱鑫磊发表于 2023-9-14 18:31
送礼物，祝好！

谢谢焱鑫磊的精美礼物{:4_171:}

小辣椒 发表于 2023-9-14 21:19

焱鑫磊发表于 2023-9-14 18:30
我学习制作，别嫌弃哦！

怎么会啊，很漂亮的{:4_199:}

页: [1]

花潮论坛's Archiver

《若把你》Kirsty刘瑾睿 TO：小辣椒