论坛 › 欢乐水吧 › 人生这杯酒-叶微凉

亚伦影音工作室 发表于 2023-5-2 06:51

人生这杯酒-叶微凉

本帖最后由 亚伦影音工作室 于 2024-7-13 11:36 编辑 <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 #ffffff; position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left:85%;top:50px; 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: 350px 580px;
        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)); }}
#dt { position: absolute; width: 400px; height: 400px;left: 10%; z-index: 6;top:45%;overflow:hidden;}
#an{position: absolute;width: 100%; height: 100%;left: 0%; z-index: 6;top:0%;
   }
.photo {width: 50%; height: 55%;
position: absolute;z-index: 1;border-radius: 600px 0px 650px 0px;
top:20px; left:400px;filter:contrast(120%)brightness(100%);
opacity: 0;box-shadow:0 0px 0px 2px #ffffff;
animation-name: round ;animation-duration: 48s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round {0% { opacity: 0;
    animation-timing-function: ease-in; }
    4% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
.photo:nth-child(1) {background:url(https://file.moyublog.com/d/file/2020-12-16/88764c47b149d2f7f11fe496a093b245.jpg)0 0/100% 100%;
}
.photo:nth-child(2) {background:url(https://file.moyublog.com/d/file/2020-11-26/cfd4949f05ad2e7bed52453685e2ab3b.jpg)0 0/100% 100%;
animation-delay: 6s;
}
.photo:nth-child(3) {background:url(https://file.moyublog.com/d/file/2021-02-06/8cb0f3f4db0f5db714d70265400dc115.jpg)0 0/100% 100%;
animation-delay: 12s;
}
.photo:nth-child(4) {background:url(https://file.moyublog.com/d/file/2021-07-12/8eb4e3f2147fd3db298407672ce28459.jpg)0 0/100% 100%;
animation-delay: 18s;
}
.photo:nth-child(5) {background:url(https://file.moyublog.com/d/file/2021-06-22/c9bdc0f1f5bcb384ef03e17bb18d89ee.jpg)0 0/100% 100%;
animation-delay: 24s;
}
.photo:nth-child(6) {background:url(https://file.moyublog.com/d/file/2021-10-27/t0rdkyxwt3r.jpg)0 0/100% 100%;
animation-delay: 30s;
}
.photo:nth-child(7) {background:url(https://file.moyublog.com/d/file/2022-02-23/yejanqrnd14.jpg)0 0/100% 100%;
animation-delay: 36s;
}
.photo:nth-child(8) {background:url(https://file.moyublog.com/d/file/2022-07-16/5147ea045abd3d0ee52cf83dcfb08c9d.jpg)center/cover no-repeat;
animation-delay: 42s;
}

.st img:nth-child(1) {
animation-play-state: paused;
}
.st img:nth-child(2){
animation-play-state: paused;
}
.stimg:nth-child(3){
animation-play-state: paused;
}
.st img:nth-child(4){
animation-play-state: paused;
}
.st img:nth-child(5){
animation-play-state: paused;
}
.st img:nth-child(6){
animation-play-state: paused;
}
.st img:nth-child(7) {
animation-play-state: paused;
}
.st img:nth-child(8) {
animation-play-state: paused;
}
</style>
<div id="papa">
<div id="testImg"><img class='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></div>
<div id="dt">
<img id="an"src="http://chuangshicdn.data.mvbox.cn/album/23/04/16/23041613295221266412.gif" width="100%" height="100%"></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://s2.ananas.chaoxing.com/sv-w7/audio/6a/97/c7/5ab449f34d0c31598f45c14496f2097c/audio.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>');

</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 && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('st');
            this.value = '*';
      } else {
            image.classList.add('st');
            this.value = '.';
      }
    };
}
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var image = document.getElementById("an"),
    button = document.getElementById("clock");
    if (image && button) {
    button.onclick = function() {
      if (this.value == '') {
         image.play();
            this.value = '.';
      } else {
            image.stop();
            this.value = '';
      }
    };
}

</script>

醉美水芙蓉 发表于 2023-5-2 07:05

樵歌 发表于 2023-5-2 07:49

堪称精典{:4_431:}

樵歌 发表于 2023-5-2 07:50

那播放器秒针真幸福{:4_358:}

马黑黑 发表于 2023-5-2 08:20

欣赏精美制作。节日好！

梦缘 发表于 2023-5-2 16:08

这个播放器漂亮，欣赏点赞！{:4_187:}

红影 发表于 2023-5-2 20:14

这个裁剪漂亮。设计很精美。欣赏亚伦老师好帖{:4_187:}

焱鑫磊 发表于 2023-5-2 22:12

欣赏老师佳作！{:4_204:}

查看完整版本: 人生这杯酒-叶微凉