论坛 › 动画音画 › TO亚伦老师构思及网名老师解密代码

有声有色 发表于 2022-10-4 12:52

TO亚伦老师构思及网名老师解密代码

本帖最后由 有声有色 于 2022-10-5 09:17 编辑 <br /><br /><style>
      #papa {
      margin: auto;
      left: -200px;
      width: 1024px;
      height:600px;
      background: rgba(0,0,0,.45) url('https://pic1.imgdb.cn/item/633b985016f2c2beb13dc606.gif') 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: #f92e0d;
      white-space: nowrap;
}

#lrc1 {
      width: 100%;
      height: 100%;
      color: #f92e0d;
      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 -1px0);
}

#lrc2 {
      position: absolute;
      top: 0px;
      left: 0px;
      color: #20f5f9;
      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);
}

#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 22s22s   1;background-image: url('https://pic1.imgdb.cn/item/633b8bbb16f2c2beb12cab2c.jpg')}
.book-content1{animation: roll4s 18s2;background-image: url('https://pic1.imgdb.cn/item/633b8b9f16f2c2beb12c8a93.jpg')}
.book-content2{animation: roll6s 16sinfinite;background-image: url('https://pic1.imgdb.cn/item/633b8b7c16f2c2beb12c5d54.jpg')}
.book-content3{animation: roll8s 14s1;background-image: url('https://pic1.imgdb.cn/item/633b8b6316f2c2beb12c392f.jpg')}
.book-content4{animation: roll 10s 12sinfinite;background-image: url('https://pic1.imgdb.cn/item/633b8b4916f2c2beb12c1740.jpg')}
.book-content5{animation: roll 12s 10s1;background-image: url('https://pic1.imgdb.cn/item/633b8b1a16f2c2beb12bda1c.jpg')}
.book-content6{animation: roll 14s8s2;background-image: url('https://pic1.imgdb.cn/item/633b8b0216f2c2beb12bbb73.jpg')}
.book-content7{animation: roll 16s6sinfinite;background-image: url('https://pic1.imgdb.cn/item/633b8ae716f2c2beb12b98c6.jpg')}
.book-content8{animation: roll 18s4s2;background-image: url('https://pic1.imgdb.cn/item/633b8a9216f2c2beb12b2d00.jpg')}
.book-content9{animation: roll 20s2s   infinite;background-image: url('https://pic1.imgdb.cn/item/633b8a3816f2c2beb12aaf62.jpg')}

.stop .book-content {animation: roll 22s22s 1;animation-play-state: paused;}
.stop .book-content1{animation: roll4s 18s2;animation-play-state: paused;}
.stop .book-content2{animation: roll6s 16sinfinite;animation-play-state: paused;}
.stop .book-content3{animation: roll8s 14s1;animation-play-state: paused;}
.stop .book-content4{animation: roll 10s 12sinfinite;animation-play-state: paused;}
.stop .book-content5{animation: roll 12s 10s1;animation-play-state: paused;}
.stop .book-content6{animation: roll 14s8s2;animation-play-state: paused;}
.stop .book-content7{animation: roll 16s6sinfinite;animation-play-state: paused;}
.stop .book-content8{animation: roll 18s4s2;animation-play-state: paused;}
.stop .book-content9{animation: roll 20s2s   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" >&nbsp;</div>
<div class="pagebook-content1">&nbsp;</div>

<div class="pagebook-content2" >&nbsp;</div>

<div class="page book-content3">&nbsp;</div>

<div class="pagebook-content4" >&nbsp;</div>

<div class="pagebook-content5" >&nbsp;</div>

<div class="pagebook-content6">&nbsp;</div>

<div class="pagebook-content7">&nbsp;</div>

<div class="pagebook-content8" >&nbsp;</div>

<div class="page book-content9">&nbsp;</div>
</div>
      <imgid="mpic"style="width: 100%; height: 100%;background: url('https://pic1.imgdb.cn/item/633baf3116f2c2beb1606144.png')0 0/50% 70%" >
<imgid="mpic1"style="width: 100%; height: 100%;background: url('https://pic1.imgdb.cn/item/633bb0ac16f2c2beb1633ca7.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 = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
aud.src = 'https://link.hhtjim.com/163/1421257932.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) {
                        if (mKey === j) showLrc(lrcAr);
                        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;
      mFlag = !mFlag;
};

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 mtime = lrcAr - (aud.currentTime - lrcAr);
      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>

三月的阳光 发表于 2022-10-4 13:00

精美佳作，制作辛苦了·~{:4_187:}

有声有色 发表于 2022-10-4 13:03

三月的阳光 发表于 2022-10-4 13:00
精美佳作，制作辛苦了·~

谢谢鼓励，我只会TO老师们的代码

红影 发表于 2022-10-4 14:08

有声有色除了喜欢评弹和越剧，还喜欢京剧啊。欣赏好帖{:4_204:}

有声有色 发表于 2022-10-4 14:26

红影 发表于 2022-10-4 14:08
有声有色除了喜欢评弹和越剧，还喜欢京剧啊。欣赏好帖

是喜欢，但是京剧我主要是喜欢程派与裘派，梅派就一般般了

红影 发表于 2022-10-4 17:25

有声有色 发表于 2022-10-4 14:26
是喜欢，但是京剧我主要是喜欢程派与裘派，梅派就一般般了

你还能如数家珍地说出这么多派别，我对这些个完全不知道呢{:4_173:}

有声有色 发表于 2022-10-4 18:37

红影 发表于 2022-10-4 17:25
你还能如数家珍地说出这么多派别，我对这些个完全不知道呢

只有知道了流派的韵味以及每个流派特性，就能听出每个流派的味道。像沪剧我也比较喜欢。过几天给你弄段大雷雨孃侬听听

起个网名好难 发表于 2022-10-4 18:53

不懂就问， TO是个什么意思？

深秋红枫 发表于 2022-10-4 19:15

起个网名好难 发表于 2022-10-4 18:53
不懂就问， TO是个什么意思？

可能是“偷"的代用词吧。

亚伦影音工作室 发表于 2022-10-5 05:31

借鉴不叫偷，天下文章一大抄，会用是关键！

有声有色 发表于 2022-10-5 08:06

起个网名好难 发表于 2022-10-4 18:53
不懂就问， TO是个什么意思？

入乡随俗的网络语

有声有色 发表于 2022-10-5 08:13

亚伦影音工作室 发表于 2022-10-5 05:31
借鉴不叫偷，天下文章一大抄，会用是关键！

谢谢 理解与鼓励

起个网名好难 发表于 2022-10-5 09:05

有声有色 发表于 2022-10-5 08:06
入乡随俗的网络语

哦， 谢谢指教。 可为什么网上找不到有关的解释条目。

红影 发表于 2022-10-5 10:05

有声有色 发表于 2022-10-4 18:37
只有知道了流派的韵味以及每个流派特性，就能听出每个流派的味道。像沪剧我也比较喜欢。过几天给你弄段大 ...

好啊，还是觉得沪剧好听{:4_173:}

有声有色 发表于 2022-10-5 11:44

红影 发表于 2022-10-5 10:05
好啊，还是觉得沪剧好听

看来人都喜好本地剧种

查看完整版本: TO亚伦老师构思及网名老师解密代码