论坛 › 欢乐水吧 › 再见吧我最爱的你 - 王韵

亚伦影音工作室 发表于 2023-8-4 16:31

再见吧我最爱的你 - 王韵

本帖最后由 亚伦影音工作室 于 2023-8-6 13:21 编辑 <br /><br /><style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/79b875e5ba4a02ec152ed8085f972c3d.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 2.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://file.moyublog.com/d/file/2022-07-16/5147ea045abd3d0ee52cf83dcfb08c9d.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%;
clip-path: polygon(100.00% 50.00%, 98.18% 50.19%, 93.01% 51.48%, 85.37% 54.68%, 76.48% 60.15%, 67.68% 67.68%, 60.15% 76.48%, 54.68% 85.37%, 51.48% 93.01%, 50.19% 98.18%, 50.00% 100.00%, 49.81% 98.18%, 48.52% 93.01%, 45.32% 85.37%, 39.85% 76.48%, 32.32% 67.68%, 23.52% 60.15%, 14.63% 54.68%, 6.99% 51.48%, 1.82% 50.19%, 0.00% 50.00%, 1.82% 49.81%, 6.99% 48.52%, 14.63% 45.32%, 23.52% 39.85%, 32.32% 32.32%, 39.85% 23.52%, 45.32% 14.63%, 48.52% 6.99%, 49.81% 1.82%, 50.00% 0.00%, 50.19% 1.82%, 51.48% 6.99%, 54.68% 14.63%, 60.15% 23.52%, 67.68% 32.32%, 76.48% 39.85%, 85.37% 45.32%, 93.01% 48.52%, 98.18% 49.81%, 100.00% 50.00%);

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://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/282a3dca7183aa771d801cce4f1aec24.jpg" />

<img alt="" class="photo"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/efde44f91eb6e8b06b18397c01c9310c.jpg" />

<img alt=""class="photo"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/de0740006c22e86ef4b5bee531ef72f3.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/abe39a75e4e867b8b42277909f76d650.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a9903bbafba80f349d5c6f787021ab4d.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/23e45de66239ff0e5c4d35f5812be39f.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c8eff17a7a0d1132a001fc899d9d51e4.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/29c50e716edbe7f5bd4004c1fae3a5cc.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6c70a2a7c702f60b406184523e77953b.jpg" />

<img alt="" class="photo"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9c15530cf71f6b96e31e7ee10b9b350d.jpg" />

<img alt=""class="photo"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7a67dece8aff3b212fa180d8c1f7eac5.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9fca3d32997953b9d0dfe55db8026ec8.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/36c861bb19ece2a113f486f908e2e1e2.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b0bc2e99be5d6b924310d19628e8f838.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/197bfe0dc55aab7dd86979c27555df70.jpg" />
</div>
<div id="clock">00:00 &nbsp; &nbsp; 00:00<span></span><span></span></div>
<div id="lrc" data-lrc="亚伦影音工作室">亚伦影音工作室</div>
</div>

<audio id="aud" src="https://www.qqmc.com/mp3/music289727938.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 = `再见吧我最爱的你 - 王韵
作词Lyricist：玄昌俊| 李若夕
作曲Composer：玄昌俊
制作:亚伦影音工作室
不知道从什么时候起
你就住在了我的心里
那一点甜蜜一点惊喜
让我深深留恋难忘记
我努力装作不在乎你
也曾竭尽全力忘记你
不敢碰触有你的回忆
最后变成最遥远的距离
我留不住爱留不住情
我留住你还有什么意义
纵然我心中放不下你
我却不再是你的唯一
就算留住了风留住了雨
留不住你还有什么意义
遗憾我们曾离幸福那么近
再见吧我最爱的你
我努力装作不在乎你
也曾竭尽全力忘记你
不敢碰触有你的回忆
最后变成最遥远的距离
我留不住爱留不住情
我留住你还有什么意义
纵然我心中放不下你
我却不再是你的唯一
就算留住了风留住了雨
留不住你还有什么意义
遗憾我们曾离幸福那么近
再见吧我最爱的你
我留不住爱留不住情
我留住你还有什么意义
纵然我心中放不下你
我却不再是你的唯一
就算留住了风留住了雨
留不住你还有什么意义
遗憾我们曾离幸福那么近
再见吧我最爱的你
`;
        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-4 16:33

精致！{:4_204:}

醉美水芙蓉 发表于 2023-8-4 19:19

红影 发表于 2023-8-4 19:35

裁剪方式十分奇妙，很漂亮的制作。欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2023-8-5 21:28

亚伦这个制作漂亮的，刚才看见老头就是套用这个代码的{:4_199:}

查看完整版本: 再见吧我最爱的你 - 王韵