- UID
- 16
版主
- 主题
- 416
- 回帖
- 7060
- 精华
- 47
- 积分
- 13301
- 金币
- 70867 枚
- 鲜花
- 2844 朵
- 注册时间
- 2023-5-5
- 最后登录
- 2024-5-10
|
楼主 |
发表于 2023-9-4 21:53
|
显示全部楼层
《笑问情缘》地址:http://qslt.net/forum.php?mod=viewthread&tid=4239,代码如下:
- <div style="z-index: 127;width: 1234px; height: 700px; margin-top:50px; margin-left:-30px; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #8624A9 overflow: hidden;transform: rotate(0deg);background:url('https://s1.ax1x.com/2023/08/20/pP8oEKs.jpg')0 0/100% 100%,linear-gradient(50deg, #4124A9, #ff0000, #000000, #00f000);text-align: center;">
- <div class="HT">
- <div id="testImg" class="mm">
- <img src="http://qslt.net/data/attachment/forum/202308/23/155501fl73xfpxl6gbxlol.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/23/153735kfutbs33utqf43bf.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/23/135840em114m944us654zk.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/23/153755bnekx3e2lje22key.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/23/153756a779k92acz393a9s.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/23/155439e9i44y49z489gzm1.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/23/160431x8mg0gcgi0kkbbfc.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/23/161421oprhqp0a85k5a9p0.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/23/200919q66jus7ff8zpkfmp.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/23/214850g17fz14kqeri5zqr.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/23/214850evzachza3fhxzetf.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/24/153924yp4qudhrd2g6qv6p.gif" />
- <img src="http://qslt.net/data/attachment/forum/202308/24/154118oxjzrfdvffxfaffa.gif" />
- </div>
- <audio autoplay="" id="MusicPlayer" src="https://music.163.com/song/media/outer/url?id=133875" loop="" ></audio>
- <div class="img_border" ><img id="aplay" style="width: 100px; height: 100px;mask: radial-gradient(transparent 6px,#red 0);-webkit-mask: radial-gradient(transparent 6px,red 0);background: url()0 0/100% 100%,url('https://s1.ax1x.com/2023/08/19/pP3xdS0.jpg')-460px 60px/160% 100%; "></div>
- <div class="btn">
- <div id="testImg" onclick="bf()"> <input type="button" id="testBtn"value="暂停"style="width: 100px; height: 40px;border-radius: 0%;color: #000000;font-size:20px;font-weight:bold;border:1px solid #000000;"> </div>
- </div>
- <div class="lrc">
- <ul id="ullrc">
- </ul>
- </div></div>
- </div>
- <style type="text/css">
- .mm img{width:150px;
- height: 250px;
- position: absolute;
- left:100px;
- top:0px;z-index: 10;
- 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(450px);}
- .mm img:nth-child(2){
- transform: rotateY(40deg) translateZ(450px);
- }
- .mm img:nth-child(3){
- transform: rotateY(80deg) translateZ(450px);
- }
- .mm img:nth-child(4){
- transform: rotateY(120deg) translatez(450px);
- }
- .mm img:nth-child(5){
- transform: rotateY(160deg) translatez(450px);
- }
- .mm img:nth-child(6){
- transform: rotateY(200deg) translatez(450px);
- }
- .mm img:nth-child(7){
- transform: rotateY(240deg) translatez(450px);
- }
- .mm img:nth-child(8){
- transform: rotateY(280deg)translatez(450px);
- }
- .mm img:nth-child(9){
- transform: rotateY(320deg) translatez(450px);
- }
- .mm img:nth-child(1):stop{
- }
- .mm img:nth-child(2):stop{
-
- }
- .mm img:nth-child(3):stop{
-
- }
- .mm img:nth-child(4):stop{
-
- }
- .mm img:nth-child(5):stop{
-
- }
- .mm img:nth-child(6):stop{
- }
- .mm img:nth-child(7):stop{
-
- }
- .mm img:nth-child(8):stop{
-
- }
- .mm img:nth-child(9):stop{
-
- }
- .stop{
- animation-play-state:paused;
- }
- .mm{
- margin: 160px auto;
- width: 260px;
- height: 180px;
- transform-style: preserve-3d;
- animation-name: animate;
- animation-duration: 50s;
- animation-iteration-count: infinite;
- animation-timing-function: linear;
- position: relative;
- }
- @keyframes animate {
- from {transform: rotatex(-20deg) rotateY(0deg);}
- 50% {transform: rotatex(20deg) rotateY(-720deg);}
- to {transform: rotatex(-20deg) rotateY(0deg);}
- }
- </style>
- <style type="text/css">.items { animation: slider 0.26s linear infinite ; }
- @keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
- 50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
- </style>
- <script >
- 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>
- <style type="text/css">
- .HT{
- width: 1000px;position: absolute;top:0px; left:0px;
- }
- #MusicPlayer{
- width: 150px;
- display: block;
- margin: 0 auto;
- }
- .btn{
- display: block;z-index: 300;
- margin: 0px 0px;position: absolute;top:540px; left:20px;
- }
- .lrc{
- width: 870px;
- height: 140px;
- 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);
- display: block;position: absolute;top:500px; left:60px;z-index: 30;
- margin: 0 auto;
- }
- .lrc #ullrc{
- width: 100%;
- padding: 0;
- list-style: none;
- transition: 0.3s all ease;
- margin: 0;
- }
- /*歌词普通样式*/
- .lrc #ullrc li{
- height: 80px;
- line-height: 60px;
- font-family:华文隶书;
- font-size: 0px;
- color: #000078;transform: translate(0%,0%);
- font-weight: normal;
- transition: .3s all ease;/*一定要加上不然看着突兀*/
- list-style-type: none;
- text-align: center;
- display: block;
- width: 100%;
- margin: 0 auto;-webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-color: red;
- background-image:linear-gradient(50deg, #fff000, #ff0000, #000000, #00f000);
- background-repeat:no-repeat;
- background-position: -800px 0;
- -webkit-animation:loop 3s linear infinite;
- }
- /*动态歌词样式*/
- .lrc #ullrc li.active{
- font-size: 45px;
- color: #ff0000;transform: translate(0%,0%);
- font-weight: bold;
- }
- @-webkit-keyframes loop{
- 0%{background-position: -800px 0;}
- 100%{background-position: -0 0;}
- }
- /*mv动画*/
- .img_border{display:inline-block;width:50px;height:50px;position: absolute;top:540px; left:810px;z-index: 14;}
- .img_border #aplay{border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }
- .z360z{animation:rotating 8s linear infinite;
- }@keyframes rotating {
- from {transform: rotate(0deg);}
- to {transform: rotate(360deg);}
- }
- </style>
- <script>var lrc =`;
- function $(id) {return document.getElementById(id);
- }//这样写以后getid方便
- function getLrcArray() {
- var parts = lrc.split("\n");
- for (let index = 0; index < parts.length; index++) {
- parts[index] = getLrcObj(parts[index]);
- }
- return parts;
- function getLrcObj(content) {
- var twoParts = content.split("]");
- var time = twoParts[0].substr(1);
- var timeParts = time.split(":");
- var seconds = +timeParts[1];
- var min = +timeParts[0];
- seconds = min * 60 + seconds;
- var words = twoParts[1];
- 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[index].words;
- $("ullrc").appendChild(li);
- }
- }
- inputLrc();
- function setPosition() {
- var index = getLrcIndex();
- if (index == -1) {
- return;
- }
- var lrc_li_height = 80, lrc_ul_height = 70;
- 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[index].classList.add("active");
- }
- var turn = 0;
- function getLrcIndex(){
- var time = $("MusicPlayer").currentTime + turn;
- for (var index = 0; index < lrcArray.length; index++) {
- if (lrcArray[index].seconds > time) {
- return index - 1;
- }
- }
- }
- $("MusicPlayer").ontimeupdate = setPosition;
- </script>
- <script>
- function bf() {
- var audio = document.getElementById('MusicPlayer');
- var bf=document.getElementById("bf");
- if (audio !== null) {
- if (audio.paused) {
- audio.play(); //audio.play();
- bf.innerText="";
- } else {
- audio.pause();
- bf.innerText="";
- }
- }
- }
- 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 = '暂停';
- }
- };
- }
- var my_audio =document.getElementById("MusicPlayer");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(songkrc);
- </script>
复制代码
《三生三世》地址:http://qslt.net/forum.php?mod=viewthread&tid=4240 ,代码如下:
- <br>
- <style type="text/css">
- .lyricDisp{-webkit-text-stroke:1px #ffffff;font: bold 2em 悟空大字库, sans-serif; transition:.3s all ease;font-size:2.2em;}
- .lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
- .lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#FEFFFF 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;filter: contrast(110%)brightness(160%);overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
- .lyricDisp:nth-child(2){color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#FEFFFF 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;text-align:center;font-size:2.2em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
- #LRCShow{position:absolute;left:15%;bottom:10px;width:100%;height:100px;margin:16px auto position:relative;z-index: 11}#rdisk{position:absolute;left:20px;bottom:10px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;z-index: 11}@keyframes circleSmall2{0%{transform:rotateX(40deg) rotateY(20deg) rotateZ(0deg);}100%{transform:rotateX(40deg) rotateY(20deg) rotate(360deg);}}
-
- #hWindow {
- width:1200px;
- height:620px;
-
- bbbackground-size:cover;
-
-
- position: relative;
- margin:0px 0px;
- overflow:hidden;
- z-index: 9;
- }
- #mpic { position: absolute;
- top: 0px;
- left: 0px;
- width: 1200px;z-index: 10;
- height: 620px;
- animation: fly 100s linear infinite;
- cursor: pointer;
- opacity: 0;
- }
- #mpicc { position: absolute;
- top: 0px;
- left: 0px;
- width: 1200px;z-index: 10;
- height: 620px;
- animation: tot 80s linear infinite;
- cursor: pointer;
- opacity: 0;
- }
- #hWindow:hover #mpic { position: absolute;
- top: 0px;
- left: 0px;
- width: 1200px;z-index: 10;
- height: 620px;
- animation: fly 100s linear infinite;
- cursor: pointer;
- opacity: 1; transition: 0.3s;
- }
- #hWindow:hover #mpicc { position: absolute;
- top: 0px;
- left: 0px;
- width: 1200px;z-index: 10;
- height: 620px;
- animation: tot 80s linear infinite;
- cursor: pointer;
- opacity: 1; transition: 0.3s;
- }
- @keyframes fly {0%{
- background-position: 600% 0;
- }
- 100%{
- background-position: 30% 1600%;filter:hue-rotate(360deg)
- }
- }
- @keyframes tot { 0%{
- background-position: 0% -1600%;
- }
- 100%{
- background-position: 0% 0%;filter:hue-rotate(360deg)
- }
- }
- .book {
- position: relative;
- perspective: 730px;
- perspective-origin: center 50px; top: -80px;
- transform: scale(1.5,1.7);
- filter: drop-shadow(0px 5px 5px #cccccc);
- }
- .page {
- width: 210px;
- height: 300px;
- background-color: #cccccc;
- position: absolute;
- top: 0px;
- right: 50%;
- transform-origin: 100% 100%;
- border: solid #555555 0.4px;
- background-size: 420px 300px;
- background-position: center;
- transform-style: preserve-3d;
- }
- .page:nth-child(1) {
- transform: rotateX(60deg) rotateY(3deg);
- }
- .page:nth-child(2) {
- transform: rotateX(60deg) rotateY(4.5deg);
- }
- .page:nth-child(3) {
- transform: rotateX(60deg) rotateY(6deg);
-
- animation: nextPage 25s infinite -24s steps(1);
- background-size: 420px 300px;
- background-position: -2px -2px;
- }
- .page:nth-child(4) {
- transform: rotateX(60deg) rotateY(177deg);
- }
- .page:nth-child(5) {
- transform: rotateX(60deg) rotateY(175.5deg);
- }
- .page:nth-child(6) {
- transform: rotateX(60deg) rotateY(174deg);
- overflow: hidden;
- }
- .page:nth-child(6)::after {
- content: "";
- width: 210px;
- height: 300px;
- position: absolute;
- top: 0px;
- right: 0%;
- transform-origin: center;
- transform: rotateY(180deg);
- animation: nextPage 25s -20s infinite steps(1);
- background-size: 420px 300px;
- background-position: 100% -2px;
- }
- @keyframes nextPage {
- 0% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- }
- 20% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- }
- 40% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- }
- 60% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- }
- 80% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- }
- }
- .gap {
- width: 10px;
- height: 300px;
- background: none;
- transform: rotateX(60deg);
- transform-origin: bottom;
- position: absolute;
- top: 0px;
- left: calc(50% - 5px);
- }
- .gap::after {
- content: "";
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translate(-50%, 50%);
- background-color: #555555;
- width: 10px;
- height: 5px;
- border-radius: 50%;
- }
- .pages, .flips {
- transform-style: preserve-3d;
- }
- .flip {
- width: 32px;
- height: 300px;
- position: absolute;
- top: 0px;
- transform-origin: 100% 100%;
- right: 100%;
- border: solid #555555;
- border-width: 2px 0px;
- perspective: 8200px;
- perspective-origin: center;
- transform-style: preserve-3d;
- background-size: 420px 300px;
- }
- .flip::after {
- content: "";
- position: absolute;
- top: 0px;
- right: 0%;
- width: 100%;
- height: 100%;
- transform-origin: center;
- background-size: 420px 300px;
- }
- .flip.flip1 {
- right: 50%;
- -webkit-animation: flip1 5s infinite ease-in-out;
- animation: flip1 5s infinite ease-in-out;
- border-width: 1px 1px 1px 0;
- }
- .flip.flip1::after {
- -webkit-animation: nextFlip1 25s -20s infinite steps(1);
- animation: nextFlip1 25s -20s infinite steps(1);
- }
- .flip:not(.flip1) {
- right: calc(100% - 2px);
- top: -2px;
- transform-origin: right;
- -webkit-animation: flip2 5s ease-in-out infinite;
- animation: flip2 5s ease-in-out infinite;
- }
- .flip.flip2::after {
- -webkit-animation: nextFlip2 25s -20s infinite steps(1);
- animation: nextFlip2 25s -20s infinite steps(1);
- }
- .flip.flip3::after {
- -webkit-animation: nextFlip3 25s -20s infinite steps(1);
- animation: nextFlip3 25s -20s infinite steps(1);
- }
- .flip.flip4::after {
- -webkit-animation: nextFlip4 25s -20s infinite steps(1);
- animation: nextFlip4 25s -20s infinite steps(1);
- }
- .flip.flip5::after {
- -webkit-animation: nextFlip5 25s -20s infinite steps(1);
- animation: nextFlip5 25s -20s infinite steps(1);
- }
- .flip.flip6::after {
- -webkit-animation: nextFlip6 25s -20s infinite steps(1);
- animation: nextFlip6 25s -20s infinite steps(1);
- }
- .flip.flip7::after {
- -webkit-animation: nextFlip7 25s -20s infinite steps(1);
- animation: nextFlip7 25s -20s infinite steps(1);
- }
- .flip.flip7 {
- width: 30px;
- border-width: 1px 0px 1px 1px;
- }
- .flip.flip7::after {
- -webkit-animation: nextFlip7 25s -20s infinite steps(1);
- animation: nextFlip7 25s -20s infinite steps(1);
- }
- @keyframes flip1 {
- 0%, 20% {
- transform: rotateX(60deg) rotateY(6deg);
- }
- 80%, 100% {
- transform: rotateX(60deg) rotateY(174deg);
- }
- }
- @keyframes flip2 {
- 0%, 20% {
- transform: rotateY(0deg) translateY(0px);
- }
- 50% {
- transform: rotateY(-15deg) translateY(0px);
- }
- }
- @keyframes nextFlip1 {
- 0% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -178px -2px;
- transform: rotateY(0deg);
- }
- 10% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -210px -2px;
- transform: rotateY(180deg);
- }
- 20% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -178px -2px;
- transform: rotateY(0deg);
- }
- 30% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -210px -2px;
- transform: rotateY(180deg);
- }
- 40% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -178px -2px;
- transform: rotateY(0deg);
- }
- 50% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -210px -2px;
- transform: rotateY(180deg);
- }
- 60% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -178px -2px;
- transform: rotateY(0deg);
- }
- 70% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -210px -2px;
- transform: rotateY(180deg);
- }
- 80% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -178px -2px;
- transform: rotateY(0deg);
- }
- 90% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -210px -2px;
- transform: rotateY(180deg);
- }
- }
- @keyframes nextFlip2 {
- 0% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -148px -2px;
- transform: rotateY(0deg);
- }
- 10.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -238px -2px;
- transform: rotateY(180deg);
- }
- 20% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -148px -2px;
- transform: rotateY(0deg);
- }
- 30.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -238px -2px;
- transform: rotateY(180deg);
- }
- 40% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -148px -2px;
- transform: rotateY(0deg);
- }
- 50.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -238px -2px;
- transform: rotateY(180deg);
- }
- 60% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -148px -2px;
- transform: rotateY(0deg);
- }
- 70.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -238px -2px;
- transform: rotateY(180deg);
- }
- 80% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -148px -2px;
- transform: rotateY(0deg);
- }
- 90.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -238px -2px;
- transform: rotateY(180deg);
- }
- }
- @keyframes nextFlip3 {
- 0% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -118px -2px;
- transform: rotateY(0deg);
- }
- 11% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -268px -2px;
- transform: rotateY(180deg);
- }
- 20% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -118px -2px;
- transform: rotateY(0deg);
- }
- 31% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -268px -2px;
- transform: rotateY(180deg);
- }
- 40% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -118px -2px;
- transform: rotateY(0deg);
- }
- 51% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -268px -2px;
- transform: rotateY(180deg);
- }
- 60% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -118px -2px;
- transform: rotateY(0deg);
- }
- 71% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -268px -2px;
- transform: rotateY(180deg);
- }
- 80% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -118px -2px;
- transform: rotateY(0deg);
- }
- 91% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -268px -2px;
- transform: rotateY(180deg);
- }
- }
- @keyframes nextFlip4 {
- 0% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -88px -2px;
- transform: rotateY(0deg);
- }
- 11.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -298px -2px;
- transform: rotateY(180deg);
- }
- 20% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -88px -2px;
- transform: rotateY(0deg);
- }
- 31.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -298px -2px;
- transform: rotateY(180deg);
- }
- 40% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -88px -2px;
- transform: rotateY(0deg);
- }
- 51.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -298px -2px;
- transform: rotateY(180deg);
- }
- 60% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -88px -2px;
- transform: rotateY(0deg);
- }
- 71.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -298px -2px;
- transform: rotateY(180deg);
- }
- 80% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -88px -2px;
- transform: rotateY(0deg);
- }
- 91.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -298px -2px;
- transform: rotateY(180deg);
- }
- }
- @keyframes nextFlip5 {
- 0% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -58px -2px;
- transform: rotateY(0deg);
- }
- 12% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -328px -2px;
- transform: rotateY(180deg);
- }
- 20% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -58px -2px;
- transform: rotateY(0deg);
- }
- 32% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -328px -2px;
- transform: rotateY(180deg);
- }
- 40% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -58px -2px;
- transform: rotateY(0deg);
- }
- 52% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -328px -2px;
- transform: rotateY(180deg);
- }
- 60% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -58px -2px;
- transform: rotateY(0deg);
- }
- 72% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -328px -2px;
- transform: rotateY(180deg);
- }
- 80% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -58px -2px;
- transform: rotateY(0deg);
- }
- 92% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -328px -2px;
- transform: rotateY(180deg);
- }
- }
- @keyframes nextFlip6 {
- 0% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -28px -2px;
- transform: rotateY(0deg);
- }
- 12.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -358px -2px;
- transform: rotateY(180deg);
- }
- 20% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -28px -2px;
- transform: rotateY(0deg);
- }
- 32.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -358px -2px;
- transform: rotateY(180deg);
- }
- 40% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -28px -2px;
- transform: rotateY(0deg);
- }
- 52.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -358px -2px;
- transform: rotateY(180deg);
- }
- 60% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -28px -2px;
- transform: rotateY(0deg);
- }
- 72.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -358px -2px;
- transform: rotateY(180deg);
- }
- 80% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -28px -2px;
- transform: rotateY(0deg);
- }
- 92.5% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -358px -2px;
- transform: rotateY(180deg);
- }
- }
- @keyframes nextFlip7 {
- 0% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -2px -2px;
- transform: rotateY(0deg);
- }
- 13% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -388px -2px;
- transform: rotateY(180deg);
- }
- 20% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
- background-position: -2px -2px;
- transform: rotateY(0deg);
- }
- 33% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -388px -2px;
- transform: rotateY(180deg);
- }
- 40% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
- background-position: -2px -2px;
- transform: rotateY(0deg);
- }
- 53% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -388px -2px;
- transform: rotateY(180deg);
- }
- 60% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
- background-position: -2px -2px;
- transform: rotateY(0deg);
- }
- 73% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -388px -2px;
- transform: rotateY(180deg);
- }
- 80% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
- background-position: -2px -2px;
- transform: rotateY(0deg);
- }
- 93% {
- background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
- background-position: -388px -2px;
- transform: rotateY(180deg);
- }
- }
- </style>
- <div style="z-index: 127;width: 1200px; height: 620px; margin-top:50px; margin-left:30px; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #FAF6F6; overflow: hidden;transform: rotate(0deg);background:url('https://s1.ax1x.com/2023/08/25/pPtBJ10.jpg')0 0/100% 100%; text-align: center;">
- <div id="hWindow">
- <div class="gap"> </div>
- <div class="book">
- <div class="pages">
- <div class="page"> </div>
- <div class="page"> </div>
- <div class="page"> </div>
- <div class="page"> </div>
- <div class="page"> </div>
- <div class="page"> </div>
- </div>
- <div class="flips">
- <div class="flip flip1">
- <div class="flip flip2">
- <div class="flip flip3">
- <div class="flip flip4">
- <div class="flip flip5">
- <div class="flip flip6">
- <div class="flip flip7"> </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div id="curp"></div>
- <img id="mpic" style="width: 100%; height: 100%;background: url('https://www.kumeiwp.com/sub/filestores/2022/11/09/9d71b312b9587c941a35e338e496ae53.png')0 0/50% 50%">
- <img id="mpicc" style="width: 100%; height: 100%;background: url('https://www.kumeiwp.com/sub/filestores/2022/11/09/9d71b312b9587c941a35e338e496ae53.png')0 0/40% 40%">
- <div id="rdisk" style="width:80px;height:80px;border: 2px solid #000000;
- background: url('https://365.tf/disk/tf/1667321249.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);mask: radial-gradient(transparent 7px,#red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);left:93%;top: 475px;"></div>
- <div id="LRCShow" style="position:absolute;left:15%;bottom:10px;">
- <div class="lyricDisp"></div><div class="lyricDisp">
- </div>
- </div>
- </div>
- </div>
- <textarea id="lrc_content" style="visibility: hidden;">
- </textarea>
复制代码
|
|