论坛 › 音乐沙龙 › 《追梦赤子心》（学习黑黑《魂引》代码效果）

红影 发表于 2024-6-29 23:03

《追梦赤子心》（学习黑黑《魂引》代码效果）

<style>
#mydiv { --width: 1024px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 600px; background: #eee url('https://pic.imgdb.cn/item/667f6b01d9c307b7e9cc7641.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px rgba(0,0,0,.7); overflow: hidden; z-index: 1; position: relative;}
#mydiv::after {content: attr(data-lrc); position: absolute; top: 20px; left: -220px; width: 100%; height: 60px; text-align: center; font: normal 36px/60px sans-serif; color: transparent;text-shadow: 2px 2px 2px rgba(246,151,60,.8);background: radial-gradient(pink, white, orange) center/120px 60px; -webkit-background-clip: text;}
.ball { position: absolute; width: 50px; height: 106px; background: url('https://pic.imgdb.cn/item/667f581fd9c307b7e9b5e25f.png') no-repeat center/cover;opacity: .95; transition: width .5s, height .5s, opacity .5s; cursor: pointer; offset-path: path('M50 370 Q482 680,914 370'); offset-distance: 0; animation: 5s linear forwards;}
.ball:hover { width: 55px; height: 115px; opacity: .75; }
.ball:nth-of-type(1) { left: -20px; top: 0; animation-name: move1-1;}
.ball:nth-of-type(2) { left: 20px; top: 0; background: url('https://pic.imgdb.cn/item/667f581fd9c307b7e9b5e25f.png') no-repeat center/cover; offset-distance: 50%;}
#vid { position: absolute; right: -390px; top: -120px; width: 110%; height: 100%; transform: scale(-1,1) rotate(-30deg); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
#pic { position: absolute; width: 640px; height: 360px; top: 52px; left: 0px; mix-blend-mode: screen; animation: hy 1.2sinfinite alternate linear var(--state);}
#pic1 { position: absolute; width: 112px; height: 57px; top: 262px; left: 0px; mix-blend-mode: screen; animation: hy1 0.8sinfinite alternate linear var(--state);}
#pic2 { position: absolute; width: 58px; height: 77px; top: 212px; right: 0px; mix-blend-mode: screen; animation: hy2 0.9sinfinite alternate linear var(--state);}
@keyframes move1-1 {
        from {offset-distance: 0%;filter: hue-rotate(0); transform: rotate(-10deg); }
        to { offset-distance: 50%;   filter: hue-rotate(360deg); transform: rotate(-10deg); }
}
@keyframes move1-2 {
        from { offset-distance: 50%; transform: scale(-1,1) rotate(360deg); filter: hue-rotate(60deg); }
        to { offset-distance: 0%;transform: scale(-1,1) rotate(360deg);filter: hue-rotate(0); }
}
@keyframes move2-1 {
        from { offset-distance: 50%;filter: hue-rotate(0deg); transform: rotate(10deg); }
        to { offset-distance: 100%;filter: hue-rotate(360deg); transform: rotate(10deg); }
}
@keyframes move2-2 {
        from { offset-distance: 100%; transform: scale(-1,1) rotate(-30deg); filter: hue-rotate(360deg); }
        to { offset-distance: 50%; transform: scale(-1,1) rotate(-20deg); filter: hue-rotate(0); }
}
@keyframes hy {
        from { transform: skewX(-0deg); }
        to {transform: skewX(10deg); }
        }
@keyframes hy1 {
        from { opacity: 1; transform: rotate(3deg); }
        to { opacity: .25; transform: rotate(2deg); }
        }
@keyframes hy2 {
        from { opacity: 1; }
        to { opacity: .5; }
        }
</style>

<div id="mydiv" class="mydiv" data-lrc="HUACHAO">

        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2002677232" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/79/55/60c1c83e17233_10s_big.mp4" autoplay loop muted></video>
        <div id="b1" class="ball"></div>
        <div id="b2" class="ball"></div>
        <img id="pic" alt="" src="https://pic.imgdb.cn/item/667f690ed9c307b7e9c94036.jpg" />
        <img id="pic1" alt="" src="https://pic.imgdb.cn/item/667fea3dd9c307b7e9787dff.png" />
        <img id="pic2" alt="" src="https://pic.imgdb.cn/item/667fed39d9c307b7e97dbafe.png" />
</div>

<script>
const balls = ;
b1.onanimationend = ()=> {
        let ani = window.getComputedStyle(b1).getPropertyValue('animation-name');
        if(ani === 'move1-1') {
                b1.style.animationName = '';
                b2.style.animationName = 'move2-1';
        }else{
                b1.style.animationName = 'move1-1';
        }
};
b2.onanimationend = () => {
        let ani = window.getComputedStyle(b2).getPropertyValue('animation-name');
        if(ani === 'move2-1') {
                b2.style.animationName = 'move2-2';
        }else{
                b2.style.animationName = '';
                b1.style.animationName = 'move1-2';
        }
};
var curkey = 0, lrcAr = [];
        var getAr = (text) => {
                var ar = text.trim().split('\n');
                ar.sort();
                var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        let result = item.match(reg);
                        let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                        lrcAr.push(.trim()]);
                });
        };
var mState = () => {
        balls.forEach(b => {
                b.style.animationPlayState = aud.paused ? 'paused' : 'running';
                b.title = ['暂停','播放'][+aud.paused];
        });
        aud.paused ? vid.pause() : vid.play();
        mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
};
aud.onplaying = aud.onpause = () => mState();
balls.forEach(b => b.onclick = () => aud.paused ? aud.play() : aud.pause());
window.onresize = () => mydiv.style.setProperty('--distance', mydiv.offsetWidth + 'px');
aud.onseeked = () => curkey = 0;
        aud.ontimeupdate = () => {
                if(curkey > lrcAr.length - 1) return;
                if(aud.currentTime >= lrcAr) {
                        mydiv.dataset.lrc = lrcAr;
                        curkey ++;
                }
        };       
        var lrc = `
追梦赤子心\n歌手：Lithium Done\n学习黑黑《魂引》效果\n感谢黑黑的代码\n充满鲜花的世界到底在哪里\n如果它真的存在那么我一定会去\n我想在那里最高的山峰矗立\n不在乎它是不是悬崖峭壁\n\n用力活着用力爱哪怕肝脑涂地\n不求任何人满意只要对得起自己\n关于理想我从来没选择放弃\n即使在灰头土脸的日子里\n\n也许我没有天分\n但我有梦的天真\n我将会去证明用我的一生\n也许我手比较笨\n但我愿不停探寻\n付出所有的青春不留遗憾\n\n向前跑 迎着冷眼和嘲笑\n生命的广阔不历经磨难怎能感到\n命运它无法让我们跪地求饶\n就算鲜血洒满了怀抱\n\n继续跑 带着赤子的骄傲\n生命的闪耀不坚持到底怎能看到\n与其苟延残喘不如纵情燃烧吧\n有一天会再发芽\n\n未来迷人绚烂总在向我召唤\n哪怕只有痛苦作伴也要勇往直前\n我想在那里最蓝的大海扬帆\n绝不管自己能不能回还\n\n失败后郁郁寡欢\n那是懦夫的表现\n只要一息尚存请握紧双拳\n在天色破晓之前\n我们要更加勇敢\n等待日出时最耀眼的瞬间\n\n向前跑 迎着冷眼和嘲笑\n生命的广阔不历经磨难怎能感到\n命运它无法让我们跪地求饶\n就算鲜血洒满了怀抱\n\n继续跑 带着赤子的骄傲\n生命的闪耀不坚持到底怎能看到\n与其苟延残喘不如纵情燃烧吧\n为了心中的美好\n不妥协直到变老
`;
        getAr(lrc);

</script>

红影 发表于 2024-6-29 23:05

学一下让小人转身，本来想找首传递温暖和信念的歌曲，也没找到什么好的，就这个吧{:4_173:}

红影 发表于 2024-6-29 23:06

谢谢@马黑黑 代码{:4_187:}
这两天比较有空，还一个做好的也没发，想先回复完提醒再说了。

马黑黑 发表于 2024-6-29 23:08

这帖的创意与实现能力是杠杠滴。赞！

梦江南 发表于 2024-6-30 08:41

欣赏学习老师的精彩！问好！

梦江南 发表于 2024-6-30 08:43

想像力丰富！超棒！

梦油 发表于 2024-6-30 08:44

巴黎奥运会开幕在即，让我们以这幅美帖，预祝华夏健儿在巴黎奥运会上取得好成绩。

南无月 发表于 2024-6-30 09:58

影子的贴子一打开就是热烈奔放，
一眼看到两个火炬手传递的路径，最最厉害的是，可以转身。。
影子你的代码真是出神入化{:4_199:}

南无月 发表于 2024-6-30 10:01

梦想二字，和空中飞人，有摇摆效果，看着犹如天人一般。。。
右上角的视频，像是有某种神秘力量在发功一般，
这些动态在运动场上，氛围感满满~~
设计得太精巧了 。{:4_187:}

南无月 发表于 2024-6-30 10:11

看了代码，把小球转圈的动作去掉，反回时用scale(-1,1)实现转身效果。
这个真是构思太妙了。。超赞。。。{:4_199:}
还加了歌词，整贴效果非常完美。。

红影 发表于 2024-6-30 16:00

马黑黑 发表于 2024-6-29 23:08
这帖的创意与实现能力是杠杠滴。赞！

想让火炬手传递正能量和美好的，没找到相应歌曲，就换比较向上的这首歌{:4_173:}

红影 发表于 2024-6-30 16:00

梦江南 发表于 2024-6-30 08:41
欣赏学习老师的精彩！问好！

谢谢梦江南鼓励{:4_187:}

红影 发表于 2024-6-30 16:01

梦江南 发表于 2024-6-30 08:43
想像力丰富！超棒！

找到这图图，就给它加点元素，同时也是为了学习代码呢{:4_187:}

红影 发表于 2024-6-30 16:01

梦油 发表于 2024-6-30 08:44
巴黎奥运会开幕在即，让我们以这幅美帖，预祝华夏健儿在巴黎奥运会上取得好成绩。

梦油说得太好了，让我们一起为我们的选手们加油鼓劲{:4_178:}

红影 发表于 2024-6-30 16:03

南无月 发表于 2024-6-30 09:58
影子的贴子一打开就是热烈奔放，
一眼看到两个火炬手传递的路径，最最厉害的是，可以转身。。
影子你的代 ...

黑黑让视频翻转的，看看正好用在小人身上了{:4_173:}

红影 发表于 2024-6-30 16:05

南无月 发表于 2024-6-30 10:01
梦想二字，和空中飞人，有摇摆效果，看着犹如天人一般。。。
右上角的视频，像是有某种神秘力量在发功一般 ...

右边还加了个奋斗的文字，想让火炬手传递美好的正能量，无论是在运动场还是生活中{:4_173:}

红影 发表于 2024-6-30 16:06

南无月 发表于 2024-6-30 10:11
看了代码，把小球转圈的动作去掉，反回时用scale(-1,1)实现转身效果。
这个真是构思太妙了。。超赞。。。{ ...

小球转动角度我还留了一点，为了让小人的身体比较直点{:4_173:}
谢谢月儿夸了这么多，看得心花怒放{:4_185:}

梦油 发表于 2024-6-30 16:26

红影 发表于 2024-6-30 16:01
梦油说得太好了，让我们一起为我们的选手们加油鼓劲

这个帖子来的及时啊。

醉美水芙蓉 发表于 2024-6-30 16:29

南无月 发表于 2024-6-30 17:49

红影 发表于 2024-6-30 16:06
小球转动角度我还留了一点，为了让小人的身体比较直点
谢谢月儿夸了这么多，看得心花怒放{:4_1 ...

影子是真棒，全是发自内心的夸赞。。。{:4_199:}

查看完整版本: 《追梦赤子心》（学习黑黑《魂引》代码效果）