夏意未满（学习黑师《寻》路径效果）
本帖最后由 南无月 于 2023-5-22 17:50 编辑 <br /><br /><style>#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan url('https://s1.ax1x.com/2023/05/21/p9IZqkF.md.jpg') no-repeat center/cover;
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
#vid {
position: absolute;
width: 1400px;
height: 100%;
border-radius: 2%;
opacity: .56;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
css-doodle { position: absolute; }
</style>
<div id="papa">
<!-- 播放器 -->
<css-doodle grid="1" id="mplayer">
:doodle {
@size: 1024px 640px;
background: url('') no-repeat center/cover;
box-shadow: 0 0 6px #000;
position: relative;
z-index: 1;
}
@size: 100px;
clip-path: @shape(
fill: evenodd;
points: 400;
x: cos(2t) * cos(5t) * sin(t);
y: sin(2t) * sin(4t) * cos(5t);
rotate: 90;
);
position: absolute;
background: rgb(@m3(@r(255)));
offset-path: path('M212 180a300 120 0 1 0 600 0a300 120 0 1 0 -600 0z');
animation: move 40s infinite linear var(--state);
cursor: pointer;
@keyframes move { to { offset-distance: 100%;} }
</css-doodle>
<!-- 文本 -->
<css-doodle grid="14x6"click-to-update="">
:doodle {
@size: 620px 240px;
right: 200px;
bottom: 60px;
cursor: pointer;
z-index: 3;
}
@size: 50px;
@place: calc(@col * 40px - 20px) calc(@row * 40px - 20px);
font: normal 30px / 40px sans-serif;
color:Orange;
text-shadow: 1px 1px 2px #000;
opacity: 0;
:before {
content: @pn([《咏二十四气诗·小满四月中》‍‍‍‍【唐】元稹‍‍‍‍‍‍小满气全时，如何靡草衰。‍‍田家私黍稷，方伯问蚕丝。‍‍杏麦修镰釤，錋瓜竖棘篱。‍‍向来看苦菜，独秀也何為？‍‍‍]);
}
animation: show .3s calc((@i - 1) * .3s) linear forwards var(--state);
@keyframes show { to { opacity: 1; } }
</css-doodle>
<css-doodle id="lrc">
:doodle {
@size: auto 4em;
top: 10px;
--geci: "css-doodle player"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */
display: grid;
place-items: center start;
:before, :after {
content: var(--geci);
color:LightGrey; /* 歌词底色 */
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
white-space: pre;
}
:after {
position: absolute;
width: 0;
color: DarkSeaGreen; /* 同步歌词颜色 */
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>
<video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/20/67/5f33b039ec172.mp4" autoplay="" loop="" muted=""></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1879554304" autoplay="autoplay" loop="loop"></audio></div>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.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.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`);});
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 醉美水芙蓉 发表于 2023-5-21 18:08
欣赏月儿漂亮音画！
{:4_187:}水芙蓉来了，谢谢你支持哦{:4_187:} 月儿这个好，把飞行器换成了小蝴蝶，特别适合这个帖子的背景和主题呢{:4_199:} 好漂亮的音画，欣赏问好！{:4_187:} 这个里面不但有最新效果，还有诗词逐字输入和歌词同步，月儿太棒了{:4_199:} 这视频的动态和播放器的移动速度也差不多呢，调整得非常好{:4_187:} 蝴蝶的飞翔姿势很特别{:4_170:} 小满小满，交杯换盏{:4_170:} 红影 发表于 2023-5-21 19:55
月儿这个好，把飞行器换成了小蝴蝶，特别适合这个帖子的背景和主题呢
{:4_187:}小蝴蝶适合大自然 梦缘 发表于 2023-5-21 19:56
好漂亮的音画，欣赏问好！
谢谢梦缘支持鼓励{:4_187:} 红影 发表于 2023-5-21 19:59
这个里面不但有最新效果，还有诗词逐字输入和歌词同步，月儿太棒了
练习作业，看看能否叠在一起{:4_173:} 红影 发表于 2023-5-21 20:00
这视频的动态和播放器的移动速度也差不多呢，调整得非常好
这个没调，碰巧一致{:4_187:} 马黑黑 发表于 2023-5-22 13:05
蝴蝶的飞翔姿势很特别
愣头愣脑的蝴蝶飞得不错吧。。。。瞧这乐呵的。。
用老师教得方法改好了，改好了{:4_173:} 马黑黑 发表于 2023-5-22 13:05
小满小满，交杯换盏
听起来很押韵，得喝一杯{:4_199:} 南无月 发表于 2023-5-22 17:54
听起来很押韵，得喝一杯
这是呼叫 @小满 的节奏{:4_170:} 南无月 发表于 2023-5-22 17:53
愣头愣脑的蝴蝶飞得不错吧。。。。瞧这乐呵的。。
用老师教得方法改好了，改好了
以后就记住一个问题：凡使用 offset-path 的，元素如果有头尾，则应是水平朝向的。
你可以用图片沿 offset-path 运行，试试朝向问题 马黑黑 发表于 2023-5-22 18:07
这是呼叫 @小满 的节奏
小满好久不见，早该喊来喝酒{:4_170:} 马黑黑 发表于 2023-5-22 18:09
以后就记住一个问题：凡使用 offset-path 的，元素如果有头尾，则应是水平朝向的。
你可以用图片沿 of ...
好的，我得记个笔记， 不然以后还得翻 贴{:4_170:} 南无月 发表于 2023-5-22 18:13
好的，我得记个笔记， 不然以后还得翻 贴
学东西，尽可能记在心里，心里才是最好的笔记