|
|
- <style>
- #papa {
- margin: auto;
- width: 1024px;
- height: 600px;
- background: rgba(0,0,0,.45) url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c103921a0f56c06783aea56e71fd62be.JPG') no-repeat center/cover;
- margin-top: 20px;
- margin-left: 30px;
- box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000;
- display: grid;
- place-items: center;
- overflow: hidden;
- position: relative;
- z-index: 1;
- }
- #mplayer {
- position: absolute;
- bottom: 0;
- width: 300px;
- height: 80px;
- user-select: none;
- display: grid;
- place-items: center;
- cursor: pointer;
- }
- #mplayer:hover #btnwrap, #mplayer:hover {
- transform: translateY(var(--yy: -20px;));
- }
- #mplayer:hover #btnwrap {
- background:#0000;
- -webkit-background-clip : text;
- border-radius: 0px;
- opacity: 1;
- }
- #btnwrap, #prog {
- position: absolute;
- display: grid;
- place-items: center;
- transition: .7s;
- }
- #btnwrap {
- --yy: -20px;
- width: 35px;
- height: 35px;top: 25px;
- left: 560px;
- transform: rotate(0deg);
- border: 1px solid tan;
- border-radius: 0px;
- opacity: 1;
- }
- #btnplay {
- width: 15px;
- height: 15px;
- transform: translateX(3px);
- background: #cccccc;
- clip-path: polygon(0 0, 0% 100%, 100% 50%);
- }
- #btnpause {
- width: 2px;
- height: 15px;
- border-style: solid;
- border-width: 0px 3px;
- border-color: transparent #cccccc;
- display: none;
- }
- #prog {
- --yy: 40px;
- width: 750px;
- height: 2px;
- border-radius: 0px;
- background: #0000;
- font: normal 15px / 36px sans-serif;
- color: #ffffff;
-
- opacity: .8;
- }
- #lrcwrap {
- position: absolute;
- top: 480px;
- font-family: 华文隶书;
- font-size: 45px;
- }
- #lrc1, #lrc2 {
- width: 100%;
- height: 100%;
- color: #ffffff;
- white-space: nowrap;
- }
- #lrc1 {
- width: 100%;
- height: 100%;
- color: #ffff00;
- white-space: nowrap;
- filter: drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px 0);
- }
- #lrc2 {
- position: absolute;
- top: 0px;
- left: 0px;
- color: #880000;
- 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 -1px 0);
- }
- #mpic {
- position: absolute;
- transform: rotateY(0deg);
- top: 0px;
- left: 0px;
- width: 1024px;
- height: 600px;
- animation: rote 80s linear infinite;
- cursor: pointer;
- opacity: 1;
- }
- @keyframes rote {
- from {
- background-position: 0 0;
- filter: hue-rotate(360deg)
- }
- to {
- background-position: -1600px 300px;
- }
- }
- #mpic1 {
- position: absolute;
- transform: rotateY(0deg);
- top: 0px;
- left: 0px;
- width: 1024px;
- height: 600px;
- animation: rotet 100s linear infinite;
- cursor: pointer;
- opacity: 1;
- }
- @keyframes rotet {
- from {
- background-position: 0 0;
- filter: hue-rotate(360deg)
- }
- to {
- background-position: 0px -1600px;
- }
- }
- @keyframes fly {
- from {
- offset-distance: 0%;
- }
- to {
- offset-distance: 100%;
- }
- }
- @keyframes mov1 {
- from {
- width: 0%;
- }
- to {
- width: 100%;
- }
- }
- @keyframes mov2 {
- from {
- width: 0%;
- }
- to {
- width: 100%;
- }
- }
- #disc {
- position: absolute;
- width: 90px;
- height: 90px;
- left: 30px;
- bottom: 0px;
- border: 2px solid #000000;
- background: url('http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);
- mask: radial-gradient(transparent 7px,#red 0);
- -webkit-mask: radial-gradient(transparent 7px,red 0);
- border-radius: 50%;
- cursor: pointer;
- animation: rot 4s linear infinite;
- z-index: 20;
- transform: rotateX(45deg) rotateY(20deg) rotate(0deg);
- }
- @keyframes rot {
- 0% {
- transform: rotateX(45deg) rotateY(20deg) rotateZ(0deg);
- }
- 100% {
- transform: rotateX(45deg) rotateY(20deg) rotateZ(360deg);
- }
- }
- .book-wrap {width: 420px;
- height: 350px;
- position: relative;
- left: 180px;
- top: 30px;
- transform: rotatez(5deg)rotateX(20deg);
- transform-style: preserve-3d;}
- .page { width: 100%;
- height: 100%;
- position: absolute;
- border-radius: 2px;border: 15px solid #cccccc;
- transform-origin: left;display: flex;
- justify-content: center;
- align-items: center;
- box-shadow: 0px 0px 0px 2px #000000;
- background-size:100% 100%;}
- .book-content {animation: roll 22s 22s 1;background-image: url('http://pan.yinhuabbs.cn/view.php/0e80fdc169e80f1a97fd901413ff456d.jpg')}
- .book-content1{animation: roll 4s 18s 2;background-image: url('http://pan.yinhuabbs.cn/view.php/5f32604f8bdc04de9860157d8d2f9611.jpg')}
- .book-content2{animation: roll 6s 16s infinite;background-image: url('http://pan.yinhuabbs.cn/view.php/5904d5b2a13cdc6adf2fd21f78a66a84.jpg')}
- .book-content3{animation: roll 8s 14s 1;background-image: url('http://pan.yinhuabbs.cn/view.php/65741d48744a51bafc941fdef7a61272.jpg')}
- .book-content4{animation: roll 10s 12s infinite;background-image: url('http://pan.yinhuabbs.cn/view.php/ad54e7111a2d246318c6df42d76415c7.jpg')}
- .book-content5{animation: roll 12s 10s 1;background-image: url('http://pan.yinhuabbs.cn/view.php/ba06e0ab9118acfe6d3e76b85f2517cc.jpg')}
- .book-content6{animation: roll 14s 8s 2;background-image: url('http://pan.yinhuabbs.cn/view.php/e5b39fadd22858a675d58613c55bb573.jpg')}
- .book-content7{animation: roll 16s 6s infinite;background-image: url('http://pan.yinhuabbs.cn/view.php/f14c041506e2f856d664bb137c49c676.jpg')}
- .book-content8{animation: roll 18s 4s 2;background-image: url('http://pan.yinhuabbs.cn/view.php/da1daffd1ce7382d34a424a6f7a07d41.jpg')}
- .book-content9{animation: roll 20s 2s infinite;background-image: url('http://pan.yinhuabbs.cn/view.php/6e829d4051b8714603675a656494b590.jpg')}
- .stop .book-content {animation: roll 22s 22s 1;animation-play-state: paused;}
- .stop .book-content1{animation: roll 4s 18s 2;animation-play-state: paused;}
- .stop .book-content2{animation: roll 6s 16s infinite;animation-play-state: paused;}
- .stop .book-content3{animation: roll 8s 14s 1;animation-play-state: paused;}
- .stop .book-content4{animation: roll 10s 12s infinite;animation-play-state: paused;}
- .stop .book-content5{animation: roll 12s 10s 1;animation-play-state: paused;}
- .stop .book-content6{animation: roll 14s 8s 2;animation-play-state: paused;}
- .stop .book-content7{animation: roll 16s 6s infinite;animation-play-state: paused;}
- .stop .book-content8{animation: roll 18s 4s 2;animation-play-state: paused;}
- .stop .book-content9{animation: roll 20s 2s infinite;animation-play-state: paused;}
- @keyframes roll {
- 0% {transform: rotateY(0deg);opacity: 1;}
- 4% {transform: rotateY(-8deg);opacity: 1;}
- 30% {transform: rotateY(-170deg);opacity: 1;}
- 40% {transform: rotateY(-178deg);opacity: 1;}
- 50% {transform: rotateY(-180deg);opacity: 1;}
- 100% {transform: rotateY(-180deg);opacity: 1;}
- }
- </style>
- <div id="papa" data-lr="no"><div class="book-wrap"id="testImg">
- <div class="page book-content" > </div>
- <div class="page book-content1" > </div>
- <div class="page book-content2" > </div>
- <div class="page book-content3" > </div>
- <div class="page book-content4" > </div>
- <div class="page book-content5" > </div>
- <div class="page book-content6" > </div>
- <div class="page book-content7" > </div>
- <div class="page book-content8" > </div>
- <div class="page book-content9" > </div>
- </div>
- <img id="mpic"style="width: 100%; height: 100%;background: url('http://image.hnol.net/c/2022-01/01/20/202201012050163251-5769293.png')0 0/50% 70%" >
- <img id="mpic1"style="width: 100%; height: 100%;background: url('http://image.hnol.net/c/2022-01/01/20/202201012050163251-5769293.png')0 0/30% 40%" >
- <div id="lrcwrap">
- <span id="lrc1">正在缓冲......</span>
- <span id="lrc2">正在缓冲......</span>
- </div>
- <span id="disc"></span>
- <div id="mplayer">
- <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span><input type="button" id="testBtn" value="."style="position: absolute;border-radius: 0%;width: 35px; height: 35px;-webkit-background-clip : text;z-index: 3;"></div>
- <div id="prog">00:00 | 00:00</div>
- </div>
- </div>
- <script>
- let mKey = 0, mFlag = true, aud = new Audio();
- let lrcAr = [
- [1.00,'这一程 (DJ默涵版) - 大欢',2],
- [3.00,'词:大欢 曲:大欢',2],
- [5.00,'制作:亚伦',2],
- [7.00,'出品:亚伦影音工作室',12],
- [21.00,'跋山涉水起早贪黑一回又一回',3],
- [25.00,'人前微笑转身后的那一种滋味',4],
- [30.00,'每次遇到困难都是一个人来背',3],
- [34.00,'可谁知道坚强背后藏着多少泪',4],
- [39.00,'有时候真想找个地方大哭一回',3],
- [43.00,'发泄心中多年以来所有的卑微',4],
- [48.00,'可是生活就像一座无情的堡垒',4],
- [52.00,'擦干眼泪后还要继续往前追',4],
- [59.00,'这一程走的太累',2],
- [61.00,'心变成灰流下了眼泪',2],
- [64.00,'多少后悔多少狼狈多少次崩溃',4],
- [69.00,'以为真心可以得到想要的完美',3],
- [73.00,'可换来的是无尽的伤悲',3],
- [77.00,'这一程走的太累',2],
- [79.00,'心变成灰流下了眼泪',2],
- [82.00,'拼命的追拼命的飞得不到安慰',4],
- [87.00,'不想再为了谁让自己变得憔悴',3],
- [91.00,'就算余生孤独陪着我入睡',3],
- [114.00,'有时候真想找个地方大哭一回',3],
- [119.00,'发泄心中多年以来所有的卑微',3],
- [123.00,'可是生活就像一座无情的堡垒',4],
- [128.00,'擦干眼泪后还要继续往前追',4],
- [134.00,'这一程走的太累',2],
- [137.00,'心变成灰流下了眼泪',2],
- [140.00,'多少后悔多少狼狈多少次崩溃',4],
- [145.00,'以为真心可以得到想要的完美',3],
- [149.00,'可换来的是无尽的伤悲',3],
- [153.00,'这一程走的太累',2],
- [155.00,'心变成灰流下了眼泪',3],
- [159.00,'拼命的追拼命的飞得不到安慰',3],
- [163.00,'不想再为了谁让自己变得憔悴',4],
- [168.00,'就算余生孤独陪着我入睡',4]
- ];
- aud.src = 'https://www.qqmc.com/mp3/music219519312.mp3';
- aud.autoplay = true;
- aud.loop = true;
- disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
- aud.addEventListener('playing', () => disc.style.animationPlayState = 'running');
- aud.addEventListener('pause', () => disc.style.animationPlayState = 'paused');
- mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
- aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
- aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');
- mpic1.style.animationPlayState = aud.paused ? 'paused' : 'running';
- aud.addEventListener('playing', () => mpic1.style.animationPlayState = 'running');
- aud.addEventListener('pause', () => mpic1.style.animationPlayState = 'paused');
- btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
- prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
- aud.addEventListener('pause', () => mState());
- aud.addEventListener('play', () => mState());
- aud.addEventListener('seeked', () => calcKey());
- aud.addEventListener('timeupdate', () => {
- prog.style.background = 'linear-gradient(90deg, orange, purple ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
- prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
- for (j = 0; j < lrcAr.length; j++) {
- if (aud.currentTime >= lrcAr[j][0]) {
- if (mKey === j) showLrc(lrcAr[j][2]);
- else continue;
- }
- }
- });
- let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc2.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc2.style.animationPlayState = 'running');
- let showLrc = (time) => {
- lrc2.style.animation = (mFlag ? 'mov1 ': 'mov2 ') + time + 's linear forwards';
- lrc1.innerHTML = lrc2.innerHTML = lrcAr[mKey][1];
- mKey += 1;
- mFlag = !mFlag;
- };
- let calcKey = () => {
- for (j = 0; j < lrcAr.length; j++) {
- if (aud.currentTime <= lrcAr[j][0]) {
- mKey = j - 1;
- break;
- }
- }
- if (mKey < 0) mKey = 0;
- if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
- let mtime = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
- showLrc(mtime);
- };
- let toMin = (val) => {
- if (!val) return '00:00';
- val = Math.floor(val);
- let min = parseInt(val / 60),
- sec = parseFloat(val % 60);
- if (min < 10) min = '0' + min;
- if (sec < 10) sec = '0' + sec;
- return min + ':' + sec;
- };
- var image = document.getElementById("testImg"),
- button = document.getElementById("testBtn");
-
- if (image.classList && image && button) {
- button.onclick = function() {
- if (this.value == '.') {
- image.classList.add('stop');
- this.value = '*';
- }
- else {
- image.classList.remove('stop');
- this.value = '.';
- }
- };
- }
- </script>
复制代码 |
|