帽子边缘的蝴蝶（学习黑师《外婆桥》路径作业之六自由乱飞）
<css-doodle grid="1x5" id="mplayer">:doodle { @size: 1024px 768px; background: url('https://s1.ax1x.com/2023/06/24/pCtXsTP.jpg'); box-shadow: 0 0 8px #000; position: relative; margin: 0 0 0 calc(50% - 593px); --geci: 'HUACHAO'; --motion: cover2; --ww: 300px; --prog: 0; --tt: 1s; --tt1: '00:00'; --tt2: '00:00'; --xplace: 50%; --yplace: 95%; --color: orange; --state: paused;}@nth(1) { @size: auto 3em; @place: 50% 5%; transform: translate(-50%); display: grid; place-items: center start; :before, :after { content: var(--geci); width: fit-content; height: fit-content; font: bold 2em Sans-serif; color: #ccc; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; white-space: pre; width: 0; color: orange; overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); }}@nth(2) { @size: var(--ww) 2px; @place: var(--xplace) var(--yplace); background: silver; :before, :after { content: ''; } :before { position: absolute; left: 0; width: var(--prog); height: 100%; background: var(--color); } :after { width: 100%; height: 10px; cursor: pointer; }}@nth(3) { @size: 60px; @place: var(--xplace) calc(var(--yplace) - 36px); cursor: pointer; animation: rot 6s infinite linear var(--state); :after { content: ''; @size: inherit; @shape: clover 4; background: var(--color); }}@nth(4) { @size: var(--ww) 20px; @place: var(--xplace) calc(var(--yplace) - 20px); :before, :after { position: absolute; width: 100%; height: 100%; color: var(--color); } :before { content: var(--tt1); } :after { content: var(--tt2); text-align: right; }}@nth(5) { @size: 200px 113px; background: url('https://638183.freep.cn/638183/Pic/2022/btf.gif'); offset-path: path('m213.5,575.6l-20.5,2.4l-25,4l-39,1l-22,-7l-18,-8l-11,-14l-7,-18c0.5,0.6 -3.5,-20.4 -3.5,-22.4c0,-2 -1,-24 0,-27c1,-3 9,-23 8.5,-23.6c0.5,0.6 15.5,-19.4 15,-20c0.5,0.6 16.5,-16.4 16,-17c0.5,0.6 15.5,-10.4 15,-11c0.5,0.6 16.5,-12.4 16,-13c0.5,0.6 31.5,0.6 31,0c0.5,0.6 15.5,0.6 16.5,0.6c1,0 31,0 30.5,-0.6c0.5,0.6 35.5,7.6 35,7c0.5,0.6 47.5,12.6 47,12c0.5,0.6 30.5,0.6 30,0c0.5,0.6 20.5,-0.4 20,-1c0.5,0.6 33.5,-10.4 33,-11c0.5,0.6 31.5,-10.4 31,-11c0.5,0.6 15.5,-21.4 15,-22c0.5,0.6 23.5,-8.4 23,-9c0.5,0.6 16.5,-16.4 16.5,-18.4c0,-2 8,-24 8,-24c0,0 15,-15 17,-16c2,-1 14,-16 15,-18c1,-2 11,-20 13,-22c2,-2 13,-15 16,-17c3,-2 22,-30 21.5,-30.6c0.5,0.6 21.5,-12.4 21,-13c0.5,0.6 18.5,-19.4 19.5,-19.4c1,0 19,-11 18.5,-11.6c0.5,0.6 16.5,-9.4 16,-10c0.5,0.6 26.5,-2.4 26.5,-2.4c0,0 12,-2 11.5,-2.6c0.5,0.6 15.5,3.6 15,3c0.5,0.6 11.5,10.6 11,10c0.5,0.6 7.5,20.6 7,20c0.5,0.6 0.5,25.6 0,25c0.5,0.6 -8.5,36.6 -9,36c0.5,0.6 -11.5,36.6 -12,36c0.5,0.6 -23.5,24.6 -24,24c0.5,0.6 -24.5,25.6 -25.5,25.6c-1,0 -37,11 -37.5,10.4c0.5,0.6 -30.5,11.6 -31,11c0.5,0.6 -27.5,5.6 -32.5,7.6c-5,2 -38,11 -39,11c-1,0 -22,3 -22.5,2.4c0.5,0.6 -9.5,3.6 -10,3'); offset-distance: 0%; animation: fly 40s infinite alternate var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; }}@keyframes cover2 { from { width: 0; } to { width: 100%; }}@keyframes rot { to { transform: rotate(360deg); }}@keyframes fly { to { offset-distance: 100%; }}</css-doodle><audio id="aud" src="https://music.163.com/song/media/outer/url?id=276130" autoplay="autoplay" loop="loop"></audio><script>(function() {
let script=document.createElement('script');
script.src='https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
let mKey=0, mFlag=true, slip=0.6;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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=()=> mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc=(time)=> {
mplayer.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2'); mplayer.style.setProperty('--geci', '"'+ lrcAr + '"'); mplayer.style.setProperty('--tt', time + 's'); 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);
}
;
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('--prog', 100*aud.currentTime/aud.duration + '%'); mplayer.style.setProperty('--tt1', `'${toMin(aud.currentTime)}'`); mplayer.style.setProperty('--tt2', `'${toMin(aud.duration)}'`);
}
);
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', ()=> calcKey());
window.onload=()=> {
let btns=mplayer.shadowRoot.querySelectorAll('cell');
let ww=parseInt(window.getComputedStyle(mplayer).getPropertyValue('--ww'));
btns.onclick=(e)=> aud.currentTime=e.offsetX * aud.duration / ww;
btns.onclick=()=> aud.paused ? aud.play() : aud.pause();
}
}
)();</script> 月儿给了蝴蝶一个曲线的路径呢，漂亮{:4_187:} 这美女的帽檐很宽大，正好适合月儿在上面做文章呢{:4_173:} 红影 发表于 2023-6-25 21:08
这美女的帽檐很宽大，正好适合月儿在上面做文章呢
{:4_173:}大点好做大概的路径，精细的就不成了 红影 发表于 2023-6-25 21:06
月儿给了蝴蝶一个曲线的路径呢，漂亮
练习作业，正尝试中 醉美水芙蓉 发表于 2023-6-25 18:21
这个图图美美哒！
{:4_173:}巧了，我也这么觉得 南无月 发表于 2023-6-25 22:18
大点好做大概的路径，精细的就不成了
主要那蝴蝶的动图范围很大，如果是小点点就会在路径上非常清楚。{:4_173:} 南无月 发表于 2023-6-25 22:19
练习作业，正尝试中
尝试的非常成功。{:4_187:} 如果是蜜蜂，菇凉会吓跑滴{:4_170:} 如果把那美女换成无盐，那对蝶儿还会绕着帽沿飞吗{:4_189:} 红影 发表于 2023-6-25 23:48
主要那蝴蝶的动图范围很大，如果是小点点就会在路径上非常清楚。
需要不断尝试{:4_187:} 红影 发表于 2023-6-25 23:49
尝试的非常成功。
影子鼓励了，我加油{:4_170:} 马黑黑 发表于 2023-6-25 23:50
如果是蜜蜂，菇凉会吓跑滴
你这个建议菇凉紧张的很{:4_170:} 樵歌 发表于 2023-6-26 07:15
如果把那美女换成无盐，那对蝶儿还会绕着帽沿飞吗
无盐内秀更难能可贵，会的吧{:4_173:} {:4_199:} 辫子哥哥 发表于 2023-6-26 20:40
感谢临贴回复{:4_187:} 欣赏精彩佳作，谢谢分享，点赞！{:4_176:} 南无月 发表于 2023-6-26 20:30
你这个建议菇凉紧张的很
蜜蜂是人类的好朋友 梦缘 发表于 2023-6-26 20:49
欣赏精彩佳作，谢谢分享，点赞！
谢谢梦缘鼓励支持哦{:4_187:}