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

翁奕童苑 发表于 2022-6-28 13:06

测试

<p></p>

<style>
.papa { width: 1000px; height: 600px; margin-top:30px; margin-left:-130px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/04/22030409205677912653.gif)0 0px/100% 100%, linear-gradient(0deg, #000080, #883300, #882222, #000000); text-align: center;position: relative;z-index: 100; }
.papa input { border: none; outline: none; opacity: 1; cursor: pointer; position: relative;}
.papa p { margin: 0; padding: 0; }
.playbox { position: relative; left: 0px; top: 480px; padding: 10px;text-align: center;font: normal 3em sans-serif; color: #ff0000; font-family:宋体; 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); z-index: 30;}
#btnplay { width: 30px; height: 30px; border-radius: 50%;position: relative; z-index: 30;}
#btnplay:hover { background: #aaa; color: #ff0000;position: relative;z-index: 30; }

</style>
<style type="text/css">
#mm img{ width:180px;
            height: 275px;
            position: absolute;
            left:0px;
            top:-80px;z-index: 30;
            box-shadow:0px 0px 0px 2px #000000, 0px 0px 0px 8px #cccccc;
            background-size:100% 100%;

            border-radius: 0px;
         }
         #mm img:nth-child(1){
            transform:translateZ(350px);}
         #mm img:nth-child(2){
            transform: rotateY(40deg) translateZ(350px);
         }
         #mm img:nth-child(3){
            transform: rotateY(80deg) translateZ(350px);
         }
         #mm img:nth-child(4){
            transform: rotateY(120deg) translatez(350px);
         }
         #mm img:nth-child(5){
            transform: rotateY(160deg) translatez(350px);
         }
         #mm img:nth-child(6){
            transform: rotateY(200deg) translatez(350px);
         }
         #mm img:nth-child(7){
            transform: rotateY(240deg) translatez(350px);
         }
         #mm img:nth-child(8){
            transform: rotateY(280deg)translatez(350px);
         }
         #mm img:nth-child(9){
            transform: rotateY(320deg) translatez(350px);
         }
         #mm img:nth-child(1):hover{
            transform: translateZ(350px)scale(1.8);-webkit-filter: grayscale(60%);}
         #mm img:nth-child(2):hover{
            transform: rotateY(40deg) translateZ(350px)scale(1.8);-webkit-filter: grayscale(60%);
         }
         #mm img:nth-child(3):hover{
            transform: rotateY(80deg) translatez(350px)scale(1.8);-webkit-filter: grayscale(60%);
         }
         #mm img:nth-child(4):hover{
            transform: rotateY(120deg) translatez(350px)scale(1.8);-webkit-filter: grayscale(60%);
         }
         #mm img:nth-child(5):hover{
            transform: rotateY(160deg) translatez(350px)scale(1.8);-webkit-filter: grayscale(60%);
         }
         #mm img:nth-child(6):hover{
            transform: rotateY(200deg) translatez(350px)scale(1.8);-webkit-filter: grayscale(60%);
         }
         #mm img:nth-child(7):hover{
            transform: rotateY(240deg) translatez(350px)scale(1.8);-webkit-filter: grayscale(60%);
         }
         #mm img:nth-child(8):hover{
            transform:rotateY(280deg) translatez(350px)scale(1.8);-webkit-filter: grayscale(60%);
         }
         #mm img:nth-child(9):hover{
            transform: rotateY(320deg) translatez(350px)scale(1.8);-webkit-filter: grayscale(60%);
         }
         #mm:hover{
         animation-play-state: paused;
            }
         #mm{
            margin: 160px auto;
            width: 180px;
            height: 275px;
            transform-style: preserve-3d;
            animation-name: animate;
            animation-duration: 30s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            position: relative;
         }
         @keyframes animate{
            from {
               transform: rotatex(-8deg) rotateY(0deg);
            }
50% {
               transform: rotatex(8deg) rotateY(-360deg);
            }
            to {
               transform: rotatex(-8deg) rotateY(0deg);
            }
         }

}
</style>

<style type="text/css">.bs{animation: slider0 0.01s linear infinite ;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 2px #CD6600) drop-shadow(0px 0px 2px #CD6600)drop-shadow(0px 0px 2px #CD6600)brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 2px #000090)drop-shadow(0px 0px 2px #000090)drop-shadow(0px 0px 2px #000090)brightness(100%);}}
</style>
<div class="papa" >

<div class="bs"style="position: relative; left: 0px; top: 0px;z-index: 30;">
   <div class="playbox">
            <p id="geci">缓冲中 ... </p> </div></div>

<div id="mm" >
<img src="https://s1.ax1x.com/2022/06/14/XhVjrq.jpg" />
<img src="https://s1.ax1x.com/2022/06/14/XhVq2j.jpg" />
<img src="https://s1.ax1x.com/2022/06/14/XhVXMn.jpg" />
<img src="https://s1.ax1x.com/2022/06/14/XhVvq0.jpg" />
<img src="https://s1.ax1x.com/2022/06/14/XhZeZ6.jpg" />
<img src="https://s1.ax1x.com/2022/06/14/XhZmdK.jpg" />
<img src="https://s1.ax1x.com/2022/06/14/XhZAMR.jpg" />
<img src="https://s1.ax1x.com/2022/06/14/XhVzZV.jpg" />
<img src="https://s1.ax1x.com/2022/06/14/XhVLxs.jpg" /></div>

            <p style="padding: 0;margin: -100px 220px;z-index: 30;">
                     <input id="btnplay" type="button" value="II" />
                     <input id="slider" type="range" min="0" max="100" value="0"style="width: 400px; height: 4px;padding: 0;margin: 0px 0px;position: relative;z-index: 30;" />
                     <span id="per" style="width: 130px; height: 6px;padding: 0;margin: 20px 0px;font-size: 20px;color: #ffffff;position: relative;z-index: 30;">0:0 | 0:0</span>
            </p>

   <audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=61478565.mp3" autoplay="autoplay" loop="loop"></audio>

</div>

<script>

let slider = document.querySelector('#slider'),
   aud = document.querySelector('#aud'),
   per = document.querySelector('#per'),
   btnplay = document.querySelector('#btnplay'),
   geci = document.querySelector('#geci');
let slip = 0; //误差值
let lrcAr = [
['1.00','浓情爱不完 (DJ何鹏) - 孙艺琪&张津涤'],
['37.00','男：我把承诺刻上海枯石烂'],
['41.00','女：我把誓言许在月下花前'],
['45.00','男：这些年的相约初衷不变'],
['50.00','女：多少愿望我们终于兑现'],
['54.00','男：你的眷恋曾经心头眉间'],
['58.00','女：我的牵绊总是悱恻缠绵'],
['63.00','男：这些年的相知羞启于关'],
['67.00','女：多少沧桑我们合力承担'],
['71.00','男：我对你的浓情爱不完'],
['76.00','携手走过俗世的情关'],
['80.00','女：让简单的日子过得惊艳'],
['85.00','每分每秒都有温柔缱绻'],
['89.00','男：我对你的浓情爱不完'],
['93.00','漫步红尘幸福到很远'],
['97.00','女：让风雨的同舟归于平凡'],
['102.00','每时每刻都用真心陪伴'],
['141.00','男：你的眷恋曾经心头眉间'],
['145.00','女：我的牵绊总是悱恻缠绵'],
['150.00','男：这些年的相知羞启于关'],
['154.00','女：多少沧桑我们合力承担'],
['159.00','男：我对你的浓情爱不完'],
['163.00','携手走过俗世的情关'],
['167.00','女：让简单的日子过得惊艳'],
['172.00','每分每秒都有温柔缱绻'],
['176.00','男：我对你的浓情爱不完'],
['180.00','漫步红尘幸福到很远'],
['185.00','女：让风雨的同舟归于平凡'],
['189.00','每时每刻都用真心陪伴'],
['194.00','男：我对你的浓情爱不完'],
['198.00','携手走过俗世的情关'],
['202.00','女：让简单的日子过得惊艳'],
['207.00','每分每秒都有温柔缱绻'],
['211.00','男：我对你的浓情爱不完'],
['215.00','漫步红尘幸福到很远'],
['220.00','女：让风雨的同舟归于平凡'],
['224.00','每时每刻都用真心陪伴']
];

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 120; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = 'II');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
   let prog = 100 * aud.currentTime / aud.duration;
   slider.value = prog;
   per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
            for(j=0; j<lrcAr.length; j++){
            if(aud.currentTime >= lrcAr - slip){
                     geci.innerHTML = lrcAr;
            }
   }
});

let toMin = (sec) => {
   if(!sec) return '0:00';
   sec = parseInt(sec);
   return parseInt(sec / 60) + ':' +parseFloat(sec % 60).toString().padStart(2,'0');
}

</script>

亚伦影音工作室 发表于 2022-6-28 15:37

用竖图效果更好！

红影发表于 2022-6-28 16:00

这个帖子里的图图能看到呢，漂亮{:4_187:}

红影发表于 2022-6-28 16:06

这个图片还能正传反转呢，而且后面的图图只要点到了也会变大的呢{:4_173:}

红影发表于 2022-6-28 16:07

你的那个测试2无法进入，我删掉了啊。

翁奕童苑 发表于 2022-6-28 16:54

红影发表于 2022-6-28 16:07
你的那个测试2无法进入，我删掉了啊。

谢谢

页: [1]

花潮论坛's Archiver

测试