《大鱼 (3D环绕版) - 周深》马黑黑老师指导
本帖最后由 醉美水芙蓉 于 2023-5-25 20:14 编辑 <br /><br /> <style>#papa {
margin: 80px 0 0 calc(50% - 681px);
width: 1200px;
height: 700px;
background: tan;
box-shadow: 0 0 10px gray;
position: relative;
--state: paused;
}
css-doodle { position: absolute; }
.vid { position: absolute; width: 1200px; height: 700px;object-fit: cover; opacity: 1; }
</style>
<div id="papa">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/15ffded0ce14cc4ed9cff128e93adcf7_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<css-doodle grid="5" id="mplayer">
:doodle {
@size: 1200px 700px;
z-index: 1;
}
@match(@i ≤ @size - 1) {
@size: @r(40,110)px;
position: absolute;
@shape: @p(fish, whale);
@place:50px 50px;
background: rgba(@m3(@r(255)), .9);
offset-path: path('M@r(200) @r(200,400), L@r(500,700) @r(300), L@r(1000,1160) @r(200,400), L@r(400,550) @r(300,460)Z');
:after {
position:absolute;
content: '';
right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(black,snow);
}
animation: swim @r(10,30)s @r(-10, 0)s infinite ease-in-out var(--state);
}
@nth(@size) {
@shape: bud 5;
@size: 100px;
@place: center 90%;
background: rgba(200,20,20,.65);
cursor: pointer;
animation: rot 5s infinite linear var(--state);
}
@keyframes swim { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<css-doodle id="lrc">
:doodle {
@size: auto 4em;
left: 450px;
top: 60px;
--geci: "css-doodle player"; --motion: cover2; --tt: 1s;
}
/* 单元格两个伪元素显示lrc歌词 */
display: grid;
place-items: center start;
:before, :after {
content: var(--geci);
color: gray; /* 歌词底色 */
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
white-space: pre;
}
:after {
position: absolute;
width: 0;
color: BlueViolet; /* 同步歌词颜色 */
overflow: hidden;
animation: var(--motion) var(--tt) linear forwards var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</css-doodle>
<audio id="aud" src="https://www.qqmc.com/mp3/music154241107.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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 mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 色彩设计特别漂亮，大鱼周深成名曲也十分经典，这贴美了美了 南无月 发表于 2023-5-25 20:02
色彩设计特别漂亮，大鱼周深成名曲也十分经典，这贴美了美了
谢谢月儿支持！ 好听，好听。3d环绕版好听。分享了。 梦油 发表于 2023-5-25 20:13
好听，好听。3d环绕版好听。分享了。
谢谢梦油老师光临！ 醉美水芙蓉 发表于 2023-5-25 20:17
谢谢梦油老师光临！
芙蓉朋友真棒！ 这个是用的我的那个路径吧，上面的鱼儿还可以再下来点，省得影响歌词呢。水芙蓉的制作真漂亮{:4_187:} 红影 发表于 2023-5-25 21:01
这个是用的我的那个路径吧，上面的鱼儿还可以再下来点，省得影响歌词呢。水芙蓉的制作真漂亮
不知道哪个可以移动鱼儿？ 美美哒 马黑黑 发表于 2023-5-25 21:20
美美哒
再次感谢黑黑老师指导！ 醉美水芙蓉 发表于 2023-5-25 21:24
再次感谢黑黑老师指导！
不客气的 动感美图，好漂亮啊{:4_187:} 千羽 发表于 2023-5-25 21:44
动感美图，好漂亮啊
谢谢千羽光临！ 醉美水芙蓉 发表于 2023-5-25 21:10
不知道哪个可以移动鱼儿？
那个路径啊，第一个L的第二个值，是管第二点高度的，关键是这个值，我取了0-300，可以取100-300就可以了{:4_187:}
页:
[1]