《雪落下的情结》王馨

焱鑫磊 发表于 2023-5-19 17:16

本帖最后由焱鑫磊于 2023-5-19 17:30 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 640px; background:url(https://s1.ax1x.com/2023/05/19/p9hzUIK.png)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: #9400D3; 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: 0 1px 0 0;width: 5px;height: 10px;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; }
#dt { position: absolute; left: 950px; bottom: 130px; width: 120px; height: 120px; background: url('https://img.fy6b.com/2023/05/04/fd2eb85696c24.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;}
}

#img_border{display:inline-block;width:100px;height:100px;position: absolute;top:520px; left:50px;z-index: 30;border-radius:0%; transition: .3s all ease;animation:rotating 10s linear infinite;filter:drop-shadow(#ffffff 0px 0 1px)}
@keyframes rotating{
0%{transform: rotate(-360deg);}
100%{transform: rotate(0deg);}
}

.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% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-90deg)scale(0.7)translate(-15%,-20%);
opacity:1
}
10% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(0.7)translate(-15%,-20%);
opacity:1}
11% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(0.9)translate(0%,0%);
opacity:1}
12% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(0.7)translate(-15%,-20%);
opacity:1}

22% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(90deg)scale(0.7)translate(-15%,-20%);
opacity:0}
}
img:nth-child(1) {background:url(https://img.fy6b.com/2023/05/19/62da09a216e6b.jpg)0 0/100% 100%;
animation-delay: 42s;
}
img:nth-child(2) {background:url(https://img.fy6b.com/2023/05/19/d452f7f2baf02.jpg)0 0/100% 100%;
animation-delay: 36s;
}
img:nth-child(3) {background:url(https://img.fy6b.com/2023/05/19/52cfbb4b8e30d.jpg)0 0/100% 100%;
animation-delay: 30s;
}
img:nth-child(4) {background:url(https://img.fy6b.com/2023/05/19/cb85b3c26376e.jpg)0 0/100% 100%;
animation-delay: 24s;
}
img:nth-child(5) {background:url(https://img.fy6b.com/2023/05/19/0d5b91d6b4fbd.jpg)0 0/100% 100%;
animation-delay: 18s;
}
img:nth-child(6) {background:url(https://img.fy6b.com/2023/05/19/40214141737f1.jpg)0 0/100% 100%;
animation-delay: 12s;
}
img:nth-child(7) {background:url(https://img.fy6b.com/2023/05/19/0025e33e689a9.jpg)0 0/100% 100%;
animation-delay: 6s;
}
img:nth-child(8) {background:url(https://img.fy6b.com/2023/05/19/d10577efab76f.jpg)0 0/100% 100%;
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;
}
.stop img: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;
}
</style>
<div id="papa">
<div id="testImg"><div id="texiao"><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></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: 100px; height: 100px;mask: radial-gradient(transparent 5px,#red 0);-webkit-mask: radial-gradient(transparent 5px,red 0);background:url(https://img.fy6b.com/2023/05/19/a502b668391e4.png)0 0/100% 100%;border-radius:0%;"></div></div>
</div>
   </div>
   <audio id="aud" src="https://www.joy127.com/url/104996.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);

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: #ff0000;
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>

红影发表于 2023-5-19 18:35

那只随意变化大小的花伞好特别。轮播的图图也好漂亮。焱鑫磊的帖子好棒{:4_199:}

红影发表于 2023-5-19 18:36

暂停能让所有的动态都停止，这个功能很不错{:4_187:}

焱鑫磊 发表于 2023-5-19 20:14

红影发表于 2023-5-19 18:35
那只随意变化大小的花伞好特别。轮播的图图也好漂亮。焱鑫磊的帖子好棒

问候红影晚上好！{:4_187:}

焱鑫磊 发表于 2023-5-19 20:14

红影发表于 2023-5-19 18:36
暂停能让所有的动态都停止，这个功能很不错

红影晚上好！{:4_204:}

红影发表于 2023-5-19 20:38

焱鑫磊发表于 2023-5-19 20:14
问候红影晚上好！

问好焱鑫磊，不客气啊{:4_187:}

马黑黑 发表于 2023-5-19 21:31

欣赏

焱鑫磊 发表于 2023-5-19 21:34

马黑黑发表于 2023-5-19 21:31
欣赏

问候马老师晚上好！{:4_187:}{:4_187:}{:4_187:}

马黑黑 发表于 2023-5-19 22:02

焱鑫磊发表于 2023-5-19 21:34
问候马老师晚上好！

晚上好

小辣椒 发表于 2023-5-19 22:13

欣赏焱鑫磊精彩制作{:4_171:}

焱鑫磊 发表于 2023-5-19 22:24

小辣椒发表于 2023-5-19 22:13
欣赏焱鑫磊精彩制作

小辣椒晚上好！{:4_187:}{:4_187:}{:4_187:}

页: [1]

花潮论坛's Archiver

《雪落下的情结》王馨