论坛 › 欢乐水吧 › 追光者

东篱闲人 发表于 2023-8-8 09:49

追光者

<style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/64d19d7b1ddac507ccee9b5b.jpg') center/cover no-repeat; box-shadow:0 0px 0px 3px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left:85%;top:10%; transform: translate(-50%, 10px);font:normal 1.5em/ 40px 华文隶书; color:#0000;filter:hue-rotate(360deg)contrast(120%)brightness(200%)drop-shadow( 0px 2px 0px #ffffff); z-index: 2; writing-mode: vertical-rl;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#E00000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);writing-mode: vertical-rl; }
@keyframes cover1{0% { width: 100%;letter-spacing: 10px; height: 0; }100% { width: 100%; height: 300%;letter-spacing: 0px;color:#000080; } }
@keyframes cover2 {0% { width: 100%;letter-spacing: 10px; height: 0; }100% { width: 100%; height: 300%;letter-spacing: 0px;color:#000080; } }

#clock {z-index: 20;
      margin: 40% 5%;
      width: 280px;
      height: 150px;
          color: #eeeeee;
       border-radius: 0px 150px 0px 150px;
      display: grid;background: url('https://pic.imgdb.cn/item/64d19e831ddac507ccf0b154.jpg') center/cover no-repeat;
box-shadow:0 0px 0px 2px #ffffff;

      place-items: center;
      position: relative;
      cursor: pointer;
      opacity: 1;
      --state: paused;
}
#clock::before, #clock::after {
      position: absolute;
      content: '';
      width: 3px;
      height: 68px;
}
#clock::after {
      --deg: 360deg;
      bottom: 50%;
      background: #00ff00;
      opacity: 1;
      transform-origin: 50% 100%;
      animation: rot var(--time) infinite linear var(--state);
}
#clock::before {
      --deg: 25deg;
      top: 50%;
      background: #ff0000;
      transform: rotate(-45deg);
      transform-origin: 50% 0;
      animation: rot .3s infinite alternate linear var(--state);
}
#clock > span {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #eeeeee;
      z-index: 2;
}
#clock > span:nth-of-type(2) {
      top: 0px;
      width: 0px;
      height: 0px;
      background: #cccccc;
}
@keyframes rot {
      to {transform: rotate(var(--deg)); }}

.photo {width: 50%; height: 50%;

position: absolute;z-index: 1;
top:25%; left:30%;filter:contrast(120%)brightness(100%);
opacity: 0;box-shadow:0 0px 0px 2px #ffffff;
animation-name: round ;animation-duration: 180s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round{0% {
-webkit-transform:rotate(0)scale(1)translate(-50%,-40%);
opacity:1}
5% {
-webkit-transform:rotate(20deg)scale(1)translate(50%,30%);
opacity:1}
8% {
-webkit-transform:rotate(-20deg)scale(1)translate(-50%,30%);
opacity:1}
11% {
-webkit-transform:rotate(20deg)scale(1)translate(50%,-50%);
opacity:1}

15% {
-webkit-transform:rotate(-20deg)scale(0.6)translate(100%,-60%);
opacity:1}
18% {
-webkit-transform:rotate(80deg)scale(0)translate(-600%,450%);
opacity:0}
}

img:nth-child(1) {animation-delay: 168s;}
img:nth-child(2) {animation-delay: 156s;}
img:nth-child(3) {animation-delay: 144s;}
img:nth-child(4) {animation-delay: 132s;}
img:nth-child(5) {animation-delay: 120s;}
img:nth-child(6) {animation-delay: 108s;}
img:nth-child(7) {animation-delay: 96s;}
img:nth-child(8) {animation-delay: 84s;}
img:nth-child(9) {animation-delay: 72s;}
img:nth-child(10){animation-delay: 60s;}
img:nth-child(11){animation-delay: 48s;}
img:nth-child(12){animation-delay: 36s;}
img:nth-child(13){animation-delay: 24s;}
img:nth-child(14) {animation-delay: 12s;}
img:nth-child(15) {animation-delay: 0s;}
.stop img:nth-child(1),
.stop img:nth-child(2),
.stop img:nth-child(3),
.stop img:nth-child(4),
.stop img:nth-child(5),
.stop img:nth-child(6),
.stop img:nth-child(7),
.stop img:nth-child(8),
.stop img:nth-child(9),
.stop img:nth-child(10),
.stop img:nth-child(11),
.stop img:nth-child(12),
.stop img:nth-child(13),
.stop img:nth-child(14),
.stop img:nth-child(15){animation-play-state: paused;}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:3%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文隶书; opacity: 1; cursor: pointer; z-index: 1111}
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id="testImg"><img alt="" class="photo" src="https://pic.imgdb.cn/item/64d191721ddac507ccd6c60f.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d1918f1ddac507ccd6fb7f.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d191ab1ddac507ccd72d68.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d191c61ddac507ccd7583e.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d191e21ddac507ccd78f1c.jp">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d191fc1ddac507ccd7b9aa.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d192161ddac507ccd7e814.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d1923b1ddac507ccd82f2d.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d192571ddac507ccd85db0.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d192701ddac507ccd88be4.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d1928b1ddac507ccd8ba76.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d192a51ddac507ccd8e724.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d193f71ddac507ccdb408b.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d193251ddac507ccd9cc23.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d193421ddac507ccd9f934.jpg">
</div>
<div id="clock" style="--time:NaNs;">00:00 &nbsp; &nbsp; 00:00<span></span><span></span></div>
<div id="lrc" data-lrc="代码编辑：醉美水芙蓉">代码编辑：醉美水芙蓉</div>
</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1297742771.mp3" loop="" autoplay=""></audio>

<script>
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;};
clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => clock.style.setProperty('--state','running'));
aud.addEventListener('pause', () => clock.style.setProperty('--state','paused'));
aud.addEventListener('canplay', () => clock.style.setProperty('--time',aud.duration + 's'));
aud.addEventListener('timeupdate', () => clock.innerHTML = toMin(aud.currentTime) + ' &nbsp; &nbsp; ' +toMin(aud.duration) + '<span></span><span></span>');
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };
</script>

<script>
(function() {
      let mKey = 0, mFlag = true;
      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;};
      let averAdd = 0, offset = 0;
      let getLrcAr = (text) => {let lrcAr = [];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 geci = ` 作词 : 唐恬
作曲 : 马敬
我可以跟在你身后
像影子追着光梦游
我可以等在这路口
不管你会不会经过
每当我为你抬起头
连眼泪都觉得自由
有的爱像阳光倾落
边拥有边失去着

如果说你是海上的烟火
我是浪花的泡沫
某一刻你的光照亮了我
如果说你是遥远的星河
耀眼的让人想哭
我是追逐着你的眼眸
总在孤单时候眺望夜空

我可以跟在你身后
像影子追着光梦游
我可以等在这路口
不管你会不会经过
每当我为你抬起头
连眼泪都觉得自由
有的爱像阳光倾落
边拥有边失去着

如果说你是夏夜的萤火
孩子们为你唱歌
那么我是想要画你的手
你看我多么渺小一个我
因为你有梦可做
也许你不会为我停留
那就让我站在你的背后
我可以跟在你身后
像影子追着光梦游
我可以等在这路口
不管你会不会经过
每当我为你抬起头
连眼泪都觉得自由
有的爱像大雨滂沱
却依然相信彩虹

有的爱像大雨滂沱
却依然相信彩虹

混音：王梓同
演唱者：汪苏泷




`;
      let lrcAr = getLrcAr(geci);
      let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');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 time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
      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;}
      let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('seeked', () => calcKey());
      aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
      mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
var image = document.getElementById("testImg"),
    button = document.getElementById("clock");

if (image.classList && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
</script>

红影 发表于 2023-8-8 10:23

原来这个是送给黑黑的礼物，这些小图的选择太有讲究了，都是黑黑的领域{:4_173:}
@马黑黑黑黑收礼开心{:4_187:}

东篱闲人 发表于 2023-8-8 10:27

红影 发表于 2023-8-8 10:23
原来这个是送给黑黑的礼物，这些小图的选择太有讲究了，都是黑黑的领域
@马黑黑黑黑收礼开心{: ...

不明白是啥玩意，乱七八糟整一堆。。。{:5_106:}

马黑黑 发表于 2023-8-8 10:31

红影 发表于 2023-8-8 10:23
原来这个是送给黑黑的礼物，这些小图的选择太有讲究了，都是黑黑的领域
@马黑黑黑黑收礼开心{: ...

{:4_181:}

马黑黑 发表于 2023-8-8 10:31

东篱闲人 发表于 2023-8-8 10:27
不明白是啥玩意，乱七八糟整一堆。。。

{:4_172:}

东篱闲人 发表于 2023-8-8 10:35

马黑黑 发表于 2023-8-8 10:31


{:5_117:}

马黑黑 发表于 2023-8-8 10:37

东篱闲人 发表于 2023-8-8 10:35


{:4_190:}

醉美水芙蓉 发表于 2023-8-8 11:58

东篱闲人 发表于 2023-8-8 12:12

醉美水芙蓉 发表于 2023-8-8 11:58
老师图图选得不错！@马黑黑老师收礼开心！

俺都不知道那些图里是啥玩意。。。{:4_170:}

红影 发表于 2023-8-8 15:39

东篱闲人 发表于 2023-8-8 10:27
不明白是啥玩意，乱七八糟整一堆。。。

挺有特色的，很附合黑黑的特点{:4_173:}

红影 发表于 2023-8-8 15:40

马黑黑 发表于 2023-8-8 10:31


收礼开心{:4_204:}

马黑黑 发表于 2023-8-8 22:15

红影 发表于 2023-8-8 15:40
收礼开心

谢谢

查看完整版本: 追光者