花妖 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

亚伦影音工作室 发表于 2024-2-26 10:26

花妖

本帖最后由亚伦影音工作室于 2024-4-1 15:02 编辑 <br /><br /><style type="text/css">
#papa{margin: auto;
width: 1200px;
height: 620px;
background:url('http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif')0 0/10% 10%,url(https://pic.imgdb.cn/item/65bf0434871b83018a3fcebd.jpg)no-repeat center/cover;
margin-top: 120px;
margin-left: -310px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;
display: grid;
place-items: center;
overflow: hidden;
position: relative;
z-index: 1;
}
#mm{width: 240px;height: 400px;transform-style: preserve-3d;animation:animate0 50s linear infinite;
transition: 3s;opacity: 1;position: absolute;margin: 120px 120px;}
#mm img{width:240px;height: 400px;position: absolute;left:0px;top:0px;z-index: 1;box-shadow:0px 0px 0px 2px #cccccc;
filter:contrast(110%)brightness(100%);overflow: hidden;border-radius: 0px;}
#mm img:nth-child(1){transform:translateZ(450px);opacity: 1;}
#mm img:nth-child(2){transform: rotateY(40deg) translateZ(450px);opacity: 1;}
#mm img:nth-child(3){transform: rotateY(80deg) translateZ(450px);opacity: 1;}
#mm img:nth-child(4){transform: rotateY(120deg) translatez(450px);opacity: 1;}
#mm img:nth-child(5){transform: rotateY(160deg) translatez(450px);opacity: 1;}
#mm img:nth-child(6){ transform: rotateY(200deg) translatez(450px);opacity: 1;}
#mm img:nth-child(7){transform: rotateY(240deg) translatez(450px);opacity: 1;}
#mm img:nth-child(8){transform: rotateY(280deg)translatez(450px);opacity: 1;}
#mm img:nth-child(9){transform: rotateY(320deg) translatez(450px);opacity: 1;}

#papa:hover #mm img:nth-child(1){transform:translateZ(450px);opacity: 0;}
#papa:hover #mm img:nth-child(2){transform: rotateY(40deg) translateZ(450px);opacity: 0;}
#papa:hover #mm img:nth-child(3){transform: rotateY(80deg) translateZ(450px);opacity: 0;}
#papa:hover #mm img:nth-child(4){transform: rotateY(120deg) translatez(450px);opacity: 0;}
#papa:hover #mm img:nth-child(5){transform: rotateY(160deg) translatez(450px);opacity: 0;}
#papa:hover #mm img:nth-child(6){ transform: rotateY(200deg) translatez(450px);opacity: 0;}
#papa:hover #mm img:nth-child(7){transform: rotateY(240deg) translatez(450px);opacity: 0;}
#papa:hover #mm img:nth-child(8){transform: rotateY(280deg)translatez(450px);opacity: 0;}
#papa:hover #mm img:nth-child(9){transform: rotateY(320deg) translatez(450px);opacity: 0;}
@keyframes animate0{
            from {transform: rotatex(-10deg) rotateY(0deg);}
50% {transform: rotatex(10deg) rotateY(-720deg);}
            to {transform: rotatex(-10deg) rotateY(0deg);}
         }
#photo {
width: 350px;
height: 620px;
position: absolute;
border: 0px solid #000000;
top: 0px;
left: 30px; opacity: 0;
transition: 1s;}
#papa:hover #photo {
opacity: 1;transition: 1s;}
#photo img {
width: 350px;
height: 620px;
position: absolute;
opacity: 0;
box-shadow: 0px 0px 0px 1px #ffffff, 0px 0px 0px 5px #880000;
top:0px; left:380px;filter:contrast(140%)brightness(100%);
animation:round 48s linear infinite;
}
@keyframes round {
0% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;
transform:translate(0%,0%)scale(1)rotate(90deg);}
12% {
opacity: 1;
transform:translate(0%,0%)scale(1)rotate(90deg);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(3)rotate(90deg);}
20% {
opacity: 0;
transform:translate(0%,0%)scale(3)rotate(90deg);}
}
#photo img:nth-child(8) {
animation-delay: 42s;}
#photo img:nth-child(7) {
animation-delay: 36s;}
#photo img:nth-child(6) {
animation-delay: 30s;}
#photo img:nth-child(5) {
animation-delay: 24s;}
#photo img:nth-child(4) {
animation-delay: 18s;}
#photo img:nth-child(3) {
animation-delay: 12s;}
#photo img:nth-child(2) {
animation-delay: 6s;}
#photo img:nth-child(1) {
animation-delay: 0s;}

.stop #photo img:nth-child(8) {animation-play-state: paused;
animation-delay: 42s;}
.stop #photo img:nth-child(7) {animation-play-state: paused;
animation-delay: 36s;}
.stop #photo img:nth-child(6) {animation-play-state: paused;
animation-delay: 30s;}
.stop #photo img:nth-child(5) {animation-play-state: paused;
animation-delay: 24s;}
.stop #photo img:nth-child(4) {animation-play-state: paused;
animation-delay: 18s;}
.stop #photo img:nth-child(3) {animation-play-state: paused;
animation-delay: 12s;}
.stop #photo img:nth-child(2) {animation-play-state: paused;
animation-delay: 6s;}
.stop #photo img:nth-child(1) {animation-play-state: paused;
animation-delay: 0s;}

#prog { position: absolute; bottom: 1%; width: 280px; height: 12px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px;left:40%; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; z-index: 999;cursor: pointer;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; font: normal 1.5em/0em serif;color:#ff0000; cursor: pointer; background: snow; left: var(--prg); }
#btnplay { position: absolute;bottom: 35px; font: normal 3em/0em serif;color:#ffffff; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }

#lrc{left: 10%;top: 70%;}#lrcc {left: 90%;transform: translate(-102%);top: 80%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 3em 华文新魏;color: #0000;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg); clip-path: inset(0% 0% 0 0); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{
0% { width: 300%;letter-spacing: 0px; height: 0;} /*字母间距：20px；*/
to { width: 300%;height: 300%;transform: skew(0deg);}
}
@keyframes cover2 {
0% { width: 300%;letter-spacing: 0px; height: 0;color:#000090;}
100% { width: 300%; height: 300%; transform: skew(0deg)}
}

</style>
<div id="papa">
<divid="mm"><img src="https://pic.imgdb.cn/item/65093817204c2e34d3def680.jpg" /> <img src="https://pic.imgdb.cn/item/65093817204c2e34d3def66a.jpg" /> <img src="https://pic.imgdb.cn/item/65093816204c2e34d3def64a.jpg" /> <img src="https://pic.imgdb.cn/item/65093816204c2e34d3def62a.jpg" /> <img src="https://pic.imgdb.cn/item/65093816204c2e34d3def61d.jpg" /> <img src="https://pic.imgdb.cn/item/64fd5599661c6c8e5429c0e2.jpg" /> <img src="https://pic.imgdb.cn/item/64fd530c661c6c8e542948df.jpg" /><img src="https://pic.imgdb.cn/item/6440cbff0d2dde57773ead84.jpg" /><img
src="https://pic.imgdb.cn/item/6440b7c60d2dde5777247178.jpg" />
</div>
<div id="testImg" >
<divid="photo">
<img src="https://pic.imgdb.cn/item/65093817204c2e34d3def680.jpg" /> <img src="https://pic.imgdb.cn/item/65093817204c2e34d3def66a.jpg" /> <img src="https://pic.imgdb.cn/item/65093816204c2e34d3def64a.jpg" /> <img src="https://pic.imgdb.cn/item/65093816204c2e34d3def62a.jpg" /> <img src="https://pic.imgdb.cn/item/65093816204c2e34d3def61d.jpg" /> <img src="https://pic.imgdb.cn/item/64fd5599661c6c8e5429c0e2.jpg" /> <img src="https://pic.imgdb.cn/item/64fd530c661c6c8e542948df.jpg" /><img src="https://pic.imgdb.cn/item/6440cbff0d2dde57773ead84.jpg" /></div>
</div>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停">❊</span>
      <span id="slider">❤</span>
</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

<audio id="aud" src="https://bzgz.club/view.php/4c2e7f5bbefbb6121356494b527f3edd.mp3" loop autoplay>
</audio>
</div>

<span id="lrcStr" style="visibility: hidden;">
花妖
作曲刀郎/作词刀郎
我是那年轮上流浪的眼泪
你仍然能闻到风中的胭脂味
我若是将诺言刻在那江畔上
一江水冷月光满城的汪洋
我在时间的树下等了你很久
尘凡儿谄我谤我笑我白了头
你看那天边追逐落日的纸鸢
像一盏回首道别夤夜的风灯
我的心似流沙放逐在车辙旁
他日你若再返必颠沛在世上
若遇那秋夜雨倦鸟也淋淋
那却是花墙下弥留的枯黄
君住在钱塘东
妾在临安北
君去时褐衣红
小奴家腰上黄
寻差了罗盘经
错投在泉亭
奴辗转到杭城
君又生余杭
我在时间的树下等了你很久
尘凡儿谄我谤我笑我白了头
你看那天边追逐落日的纸鸢
像一盏回首道别夤夜的风灯
君住在钱塘东
妾在临安北
君去时褐衣红
小奴家腰上黄
寻差了罗盘经
错投在泉亭
奴辗转到杭城
君又生余杭
</span>
<script >
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
   let tmpAr = [];
   for(j = 0; j <ar.length - 1; j ++) {
            if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
   }
   let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
   tmpAr.push(aver);
   tmpAr.forEach((item,key) => {
            ar = item > aver ? aver : item;
   });
   return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
   let lrcAr = [];
   let arr="";
   let calcRule = ;
   for(x of text.split('\n')) {
            let ar = [];
            let re = /\d+[\.:]\d+([\.:]\d+)?/g;
            let geci = x.replace(re,'');
            if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                     let time = x.match(re);
                     if(time != null) {
                           for(y of time) {
                                    let tmp = y.match(/\d+/g);
                                    let sec = 0;
                                    for(z in tmp) sec += tmp * calcRule;
                                    ar = ;
                                    lrcAr.push(ar);
                           }
                     }
            }
   }
   lrcAr.sort((a,b)=> a - b);
   return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
   lrca=lrcAr;
   lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
   let Y=String(mKey/2).indexOf(".");
   if (Y == -1)
{
   0==mKey&&(lrc.innerHTML=lrca);
   lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
   lrcc.dataset.lrc = "";
   lrc.style.setProperty('--motion', 'cover1');
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
   }
else
{
   lrc.innerHTML = lrcb;
   lrcc.dataset.lrc = lrca;
   lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
   lrcc.style.setProperty('--tt', time + 's');
   lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
   }
   mKey += 1;
};
/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
            }
   }
   if (mKey < 0) mKey = 0;
   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
   let time = lrcAr - (aud.currentTime - lrcAr);
   showLrc(time);
};

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>
<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });

prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;

(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? (aud.play()): (aud.pause()); }
</script>

红影发表于 2024-2-26 12:55

鼠标移动上去和离开，图片轮播的效果就发生变化了呢。欣赏亚伦老师漂亮的制作{:4_199:}

红影发表于 2024-2-26 12:56

那个转动的图片走马灯还能正传反转呢。真漂亮。{:4_187:}

页: [1]

花潮论坛's Archiver

花妖