论坛 › 动画音画 › 《秋天的思念》黄雯婷

焱鑫磊 发表于 2023-8-9 19:35

《秋天的思念》黄雯婷

本帖最后由 焱鑫磊 于 2023-8-9 23:49 编辑 <br /><br /><style>
#papa { margin: 100px -300px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/64d365441ddac507ccfb94c4.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/64d3686f1ddac507cc02f943.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/64d3775a1ddac507cc222d50.jpg">

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

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

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

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

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

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

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

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

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

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

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

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

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

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d375fe1ddac507cc1f814d.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://i.mp3.wf/view.php/14903a1ed7a5238cb49269eb7473e183.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 = `《秋天的思念》黄雯婷
词：王建房 曲：尹庆全
LRC歌词制作：焱鑫磊
又是一个多情的秋天
夏季挥挥手说声再见
温暖的阳光渐行渐远
每次回首 都是阴雨连绵
那是藏在秋天的思念
又是一个浓情的秋天
思念绵绵撒满人间
萧瑟的秋风呜咽在心田
一幕幕重现 仿佛在眼前
那是心中未了的尘缘
夜已深了 冷月无眠
孤单徘徊月光花前
宁静坚守默默无言
你把我淹没 用泪水灌溉着思念
又是一个浓情的秋天
思念绵绵撒满人间
萧瑟的秋风呜咽在心田
一幕幕重现仿佛在眼前
那是心中未了的尘缘
水流花落 情牵思念
把你我的心紧紧相连
思念飞越 穿越时间
凝聚成雪原静静等待着春天
水流花落 情牵思念
把你我的心紧紧相连
思念飞越 穿越时间
凝聚成雪原静静等待着春天
静静等待着春天


`;
      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-9 19:41

漂亮。欣赏焱鑫磊好制作{:4_187:}
呵呵，这个效果最近东篱大哥做了好多个{:4_173:}

焱鑫磊 发表于 2023-8-9 19:58

红影 发表于 2023-8-9 19:41
漂亮。欣赏焱鑫磊好制作
呵呵，这个效果最近东篱大哥做了好多个

我就是学东篱大哥的。{:4_181:}

红影 发表于 2023-8-9 20:15

焱鑫磊 发表于 2023-8-9 19:58
我就是学东篱大哥的。

背景图和小图都和歌曲极为契合，非常漂亮的制作{:4_187:}

焱鑫磊 发表于 2023-8-9 23:51

红影 发表于 2023-8-9 20:15
背景图和小图都和歌曲极为契合，非常漂亮的制作

谢谢红影鼓励！{:4_204:}

红影 发表于 2023-8-10 12:24

焱鑫磊 发表于 2023-8-9 23:51
谢谢红影鼓励！

感谢焱鑫磊带来的美妙视听享受{:4_187:}

查看完整版本: 《秋天的思念》黄雯婷