绿叶清舟 发表于 2022-11-5 19:41

一生不变 - 李克勤


<style>
#papa { left: -250px; width: 1100px; height: 700px; background: #e9d9c0 url('https://pic1.imgdb.cn/item/63664ad416f2c2beb123bb1c.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }

#mama { position: absolute;top: 70px; width: 350px; height: 350px; overflow: hidden; transform: rotate(45deg); }
.borderLine { position: absolute; animation: flow 4s var(--delay) linear infinite; }
.bl1 { --xx: 200%; --yy: 0%; --delay: 0s; width: 100%; height: 4px; left: -100%; top: 0; background: linear-gradient(to right, red, tan, gold,olive, tomato); }
.bl2 { --xx: 0%; --yy: 200%; --delay: 2s; width: 4px; height: 100%; right: 0; top: -100%; background: linear-gradient(to bottom, red, tan, gold,olive, tomato); }
.bl3 { --xx: -200%; --yy: 0%; --delay: 4s; width: 100%; height: 4px; right: -100%; bottom: 0; background: linear-gradient(to left, red, tan, gold,olive, tomato); }
.bl4 { --xx: 0%; --yy: -200%; --delay: 6s; width: 4px; height: 100%; left: 0; bottom: -100%; background: linear-gradient(to top, red, tan, gold,olive, tomato); }
@keyframes flow { to { transform: translate(var(--xx), var(--yy)); } }
</style>

<div id="papa">
       
       
        <div id="mama">
                <span class="borderLine bl1"></span>
                <span class="borderLine bl2"></span>
                <span class="borderLine bl3"></span>
                <span class="borderLine bl4"></span>
        </div>
</div>

<script>

let aud = new Audio();
aud.src = 'http://music.163.com/song/media/outer/url?id=115794.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
        prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
        tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
        }
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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;
}
</script>

小辣椒 发表于 2022-11-5 20:19

清舟制作的东东就是漂亮{:4_199:}

小辣椒 发表于 2022-11-5 20:20

粤语歌。冬雨的最爱@冬天的雨

小辣椒 发表于 2022-11-5 20:20

好温馨的一对小人儿{:4_173:}

千羽 发表于 2022-11-5 21:07

浪漫又温馨的画面，清舟棒棒哒{:4_187:}

马黑黑 发表于 2022-11-5 21:13

好美的作品。粥粥真是棒棒的呢

醉美水芙蓉 发表于 2022-11-5 22:08

樵歌 发表于 2022-11-6 06:57

一生相爱一辈子，大家来学习。{:4_173:}

相约爱晚亭 发表于 2022-11-6 07:36

欣赏音画佳作！

冬天的雨 发表于 2022-11-6 08:30

清舟这个是什么特效？看了云里雾里

冬天的雨 发表于 2022-11-6 08:32

看起来冬雨是凹凸了，都不会了{:4_170:}

梦油 发表于 2022-11-6 09:31

清舟朋友的每件制作都有新意

红影 发表于 2022-11-7 16:59

好漂亮，画面清新淡雅又温馨。欣赏清舟好帖{:4_187:}

大猫咪 发表于 2022-11-8 19:42

老歌经典，越听越好听！清舟制作的漂亮！ 赞一个！

{:4_204:}{:4_199:}

绿叶清舟 发表于 2022-11-9 20:28

大猫咪 发表于 2022-11-8 19:42
老歌经典，越听越好听！清舟制作的漂亮！ 赞一个！

猫好，听来听去还是老歌里能找到些感觉了

绿叶清舟 发表于 2022-11-9 20:29

红影 发表于 2022-11-7 16:59
好漂亮，画面清新淡雅又温馨。欣赏清舟好帖

影忙完了啊

绿叶清舟 发表于 2022-11-9 20:29

梦油 发表于 2022-11-6 09:31
清舟朋友的每件制作都有新意

谢谢梦油，就是想着法玩了{:4_173:}

绿叶清舟 发表于 2022-11-9 20:29

冬天的雨 发表于 2022-11-6 08:32
看起来冬雨是凹凸了，都不会了

是你太久不来了啊

绿叶清舟 发表于 2022-11-9 20:30

冬天的雨 发表于 2022-11-6 08:30
清舟这个是什么特效？看了云里雾里

就是个流动边框的

绿叶清舟 发表于 2022-11-9 20:30

相约爱晚亭 发表于 2022-11-6 07:36
欣赏音画佳作！

谢谢相约支持
页: [1] 2
查看完整版本: 一生不变 - 李克勤