全控创意HTML5音画《风雪不眠夜（DJ天福） (Remix) - 魏佳艺 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2022-12-12 21:35

全控创意HTML5音画《风雪不眠夜（DJ天福） (Remix) - 魏佳艺

本帖最后由亚伦影音工作室于 2022-12-12 21:40 编辑 <br /><br /><style>
#papa { margin: 30px -300px ; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/99a0858e3293c1b9dc6926ffb8534a67.mp4.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#mplayer {--ww: 300px;--hh: 140px;--pinpu: linear-gradient(to top,darkgreen,snow);position: absolute;bottom: 0px;left:-60px;width: var(--ww);height: var(--hh);display: flex;justify-content: center;align-items: flex-end;cursor: pointer;z-index: 10;}
.mLine {position: relative;margin: 0 1px 0 0;width: 4px;height: 8px;background: linear-gradient(0deg, #11F60A 79%,rgba(48, 235, 10, 0.01) 80%);transition: .35s;opacity: .95;}
.mLine::before { position: absolute; content: ''; width: 100%; height:2px; background: orange; top: -6px; }
.picBtn { position: absolute; left: 900px; bottom: 100px; width: 100px; height: 120px; background: url('https://pic.imgdb.cn/item/63972524b1fccdcd36a2a85d.png')0 0/100% 100%; cursor: pointer; z-index: 80; animation: rot linear 10s 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(-60deg)scale(2);}
90% {transform: rotateX(0deg) rotateY(0deg) rotateZ(260deg)scale(2);opacity: 1;}
}
#mpic { position: absolute;
top: 0px;
left: 0px;
width: 1164px;
height: 620px;
animation: fly 100s linear infinite;
cursor: pointer;
opacity: 0.5; }
@keyframes fly {from {
background-position: 0 0;
filter: hue-rotate(360deg)
}

to {
background-position: 100px 1600px;
}
}
#mpicc { position: absolute;
top: 0px;
left: 0px;
width: 1024px;
height: 600px;
animation: tot 80s linear infinite;
cursor: pointer;
opacity: 0.6; }
@keyframes tot {from {
background-position: 0 0;
filter: hue-rotate(360deg)
}

to {
background-position: -1600px 300px;
}
}

#tx { position: absolute;
top: 0px;
left: 0px;
width: 1164px;
height: 620px;
animation: tx 2s linear infinite;
cursor: pointer;
}

@keyframes tx {from {filter: hue-rotate(0deg);
}
to {filter:hue-rotate(360deg)contrast(100%)brightness(150%);}
}
</style>
<div id="papa">
<imgid="mpicc"style="width: 100%; height: 100%;background: url(https://pic.imgdb.cn/item/63972ac8b1fccdcd36aeea67.png)0 0/50% 50%" >
<imgid="mpic"style="width: 100%; height: 100%;background: url(https://pic.imgdb.cn/item/63972ac8b1fccdcd36aeea67.png)0 0/50% 50%" >
<div id="picBtn" class="picBtn"></div>
<div class="bg"><div id="tx">
<div id="" style="width: 1164px; height: 160px;z-index: 12;position: absolute;top:400px; left:-90px;">
<divclass="lrc">
   <ul id="ullrc">
      </ul>
</div></div>
<div class="img_border" ><img id="aplay" style="width: 300px; height: 300px;mask: radial-gradient(transparent 15px,#red 0);-webkit-mask: radial-gradient(transparent 15px,red 0);background: url(https://pic.imgdb.cn/item/6392d1d2b1fccdcd36701312.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f66fe9c5324ad2c35d3d74f093174c41.jpeg)0px 0px/160% 100%; "></div>

<div id="mplayer"></div></div>
   </div>
   <audio id="aud" src="https://p4.t57.cn:8399/2021/zw/1/FWM.m4a" 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: 80%; --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;}
#aud{
width: 250px;
display: block;
margin: 0 auto;}
.btn{
display: block;
margin: 0;}
.lrc{
width: 960px;
height: 120px;
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 -1px0);
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: 35px;
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: 40px;
color: #ff0000;
font-weight: bold}

/*mv动画*/

.img_border{display:inline-block;width:300px;height:300px;position: absolute;top:60px; left:240px;z-index: 4;}

.img_border #aplay{border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }

.z360z{animation:rotating 10s linear infinite;

}@keyframes rotating{

from {transform: rotate(0deg);}

to {transform: rotate(360deg);}

}

</style>
<script >var lrc = `风雪不眠夜（DJ天福） (Remix) - 魏佳艺
词：孙英男
曲：孙英男
记忆在重叠结局难改写
感情的崩裂痛在风雪不眠夜
爱与恨纠结心四分五裂
愿来世成化蝶一起看风月
飘落的大雪连绵不绝
乌云遮住了月黑暗在重叠
难过肆意猖獗眼泪不歇
一声嘶吼泣血爱情已残缺
曾经的岁月难以忘却
立下真挚誓约被时光咀嚼
嘴角的戏谑眼神的不屑
玫瑰花在凋谢让时间凝结
与你的诀别在风雪不眠夜
冰冷的季节心痛在撕裂
在感情世界寂寞无处宣泄
无奈选择妥协故事终结
记忆在重叠结局难改写
感情的崩裂痛在风雪不眠夜
爱与恨纠结心四分五裂
愿来世成化蝶一起看风月
曾经的岁月难以忘却
立下真挚誓约被时光咀嚼
嘴角的戏谑眼神的不屑
玫瑰花在凋谢让时间凝结
与你的诀别在风雪不眠夜
冰冷的季节心痛在撕裂
在感情世界寂寞无处宣泄
无奈选择妥协故事终结
记忆在重叠结局难改写
感情的崩裂痛在风雪不眠夜
爱与恨纠结心四分五裂
愿来世成化蝶一起看风月
与你的诀别在风雪不眠夜
冰冷的季节心痛在撕裂
在感情世界寂寞无处宣泄
无奈选择妥协故事终结
记忆在重叠结局难改写
感情的崩裂痛在风雪不眠夜
爱与恨纠结心四分五裂
愿来世成化蝶一起看风月
`;
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;

mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');

mpicc.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpicc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpicc.style.animationPlayState = 'paused');

tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');

picBtn.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => picBtn.style.animationPlayState = 'running');
aud.addEventListener('pause', () => picBtn.style.animationPlayState = 'paused');

var my_audio =document.getElementById("aud");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(lrc);

</script>

亚伦影音工作室 发表于 2022-12-12 21:46

点击：花伞音乐频谱雪光碟等均停止。
聚合图床上传的图片得到的地址会失效！
频谱不标准。

待修改点击光碟暂停一切动画。【期待中。。。】

红影发表于 2022-12-12 22:27

这些元素的运用都很漂亮。欣赏亚伦老师精美好帖{:4_187:}

马黑黑 发表于 2022-12-12 23:08

场面宏大、壮观。赞。

寒冬残荷 发表于 2022-12-12 23:56

欣赏、学习、收藏！谢谢分享！

亚伦影音工作室 发表于 2022-12-13 04:41

马黑黑发表于 2022-12-12 23:08
场面宏大、壮观。赞。

过奖了，比起老师查的太远了！

马黑黑 发表于 2022-12-13 07:55

亚伦影音工作室发表于 2022-12-13 04:41
过奖了，比起老师查的太远了！

话不能这么说，每个人都有自己的思路与创意以及实现方式

页: [1]

花潮论坛's Archiver

全控创意HTML5音画《风雪不眠夜（DJ天福） (Remix) - 魏佳艺