论坛 › 欢乐水吧 › 来人间走个过场

亚伦影音工作室 发表于 2023-8-8 09:13

来人间走个过场

本帖最后由 亚伦影音工作室 于 2023-8-8 11:46 编辑 <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% 2%;
        width: 280px;
        height: 150px;
          color: #eeeeee;
       border-radius: 50px 0px 50px 0px;
        display: grid;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a9903bbafba80f349d5c6f787021ab4d.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: 0px 0px 0px 1px #ffffff, 0px 0px 0px 3px #880000;
animation-name: round ;animation-duration: 90s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round{0% {opacity:1;transform:translate(0%,80%)scale(0.8)rotateX(0deg)rotateY(0deg);filter:hue-rotate(0deg)contrast(120%)brightness(100%);}
6% { opacity: 1;transform:perspective(1500px) translate(-50%,-30%)scale(0.8)rotateX(0deg)rotateY(45deg);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
12% { opacity: 1;transform:perspective(1500px) translate(30%,-30%)scale(0.8)rotateX(0deg)rotateY(-45deg);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
18% { opacity: 1;transform:perspective(1500px) translate(30%,-30%)scale(0.8)rotateX(0deg)rotateY(55deg);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
19% { opacity: 0;transform:perspective(1500px) translate(140%,10%)scale(0.8)rotateX(0deg)rotateY(55deg);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
}

img:nth-child(1) {animation-delay: 84s;}
img:nth-child(2) {animation-delay: 78s;}
img:nth-child(3) {animation-delay: 72s;}
img:nth-child(4) {animation-delay: 66s;}
img:nth-child(5) {animation-delay: 60s;}
img:nth-child(6) {animation-delay: 54s;}
img:nth-child(7) {animation-delay: 48s;}
img:nth-child(8) {animation-delay: 42s;}
img:nth-child(9) {animation-delay: 36s;}
img:nth-child(10){animation-delay: 30s;}
img:nth-child(11){animation-delay: 24s;}
img:nth-child(12){animation-delay: 18s;}
img:nth-child(13){animation-delay: 12s;}
img:nth-child(14) {animation-delay: 6s;}
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/music281457459.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 = `来人间走个过场
作词：林沛涌
作曲：陈浩
制作：亚伦
统筹：千夜@千寻文化
监制：欢欢
策划：什么洋/阿子
推广执行：什么洋/阿子
营销推广：千寻文化X 网益文化
联合出品：千寻文化X 网益文化
出品 亚伦
OP/SP：亚伦影音工作室
青春如风吹过身旁
转眼容颜渐渐沧桑
为爱疯过为梦也曾轻狂
怀念那时的模样
功名利禄忽下忽上
虚无的像云在飘荡
经历多了喜欢望着月亮
举杯敬那些过往
谁还不是来人间走个过场
不管你背着什么行囊
都要经历一样的寒来暑往
酸甜苦辣也都要品尝
谁还不是来人间走个过场
不论平凡或光芒万丈
在这没有返程列车的路上
每段风景都值得欣赏
功名利禄忽下忽上
虚无的像云在飘荡
经历多了喜欢望着月亮
举杯敬那些过往
谁还不是来人间走个过场
不管你背着什么行囊
都要经历一样的寒来暑往
酸甜苦辣也都要品尝
谁还不是来人间走个过场
不论平凡或光芒万丈
在这没有返程列车的路上
每段风景都值得欣赏
`;
        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:13

制作很漂亮，这歌曲也很有趣。欣赏亚伦老师好帖{:4_187:}歌词同步貌似有问题，尤其第一段被集中抛出，不是按歌曲节奏出来的呢。

亚伦影音工作室 发表于 2023-8-8 10:20

歌词需要修改！

查看完整版本: 来人间走个过场