父亲节快乐（学习黑师《惠风和畅》飞行效果）
本帖最后由 南无月 于 2023-6-18 10:12 编辑 <br /><br /><style>#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan url('https://s1.ax1x.com/2023/06/18/pCl6GVg.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: .26;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
css-doodle { position: absolute; }
#mydiv {
width: 1024px;
height: 640px;
overflow: hidden;
position: relative;
margin: 30px auto;
--opa1: 0; --opa2: 1; --bgcolor: rgba(255,255,255,.6);
}
.plane {
display: block;
width: 80px;
height: 60px;
left: 20px;
top: 30px;
background: linear-gradient(lightgreen,green,lightgreen);
opacity: .8;
clip-path: polygon(0 0,20% 50%,0 100%,100% 50%);
offset-path: path('M20 30 h1004 30');
offset-distance: 0%;
position: absolute;
animation: fly 40s var(--delay) infinite linear var(--state);
--delay: 0s;
}
.plane:nth-of-type(2),.plane:nth-of-type(4) { --delay: -10s; }
.plane:nth-of-type(3), {
transform: translateY(510px);
opacity: .6;
}
@keyframes fly { to { offset-distance: 100%; } }
</style>
<div id="papa">
<!-- 播放器 -->
<css-doodle grid="1" id="mplayer">
:doodle { @size: 100px; cursor: pointer; right: 455px; top: 260px; opacity: .66;z-index: 4; }
clip-path: @shape(
points: 18;
R: seq(.618, 1, 0);
T: seq(t-.55, t, t);
x: R * cos(T);
y: R * sin(T);
);
background: linear-gradient(DeepSkyBlue,Crimson,MediumPurple);
animation: rot 6s infinite linear var(--state);
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<!-- 歌词 -->
<css-doodle id="lrc">
:doodle { @size: auto 4em; z-index:5; top: 220px; left:190px; --geci: " css-doodle player"; --motion: cover2; --tt: 1s; }
display: grid;
place-items: center start;
:before, :after {
content: var(--geci);
color: Honeydew;
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
white-space: pre;
}
:after {
position: absolute;
width: 0;
color:SteelBlue;
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>
<div id="mydiv"><span id="btn"></span><span class="plane"></span><span class="plane"></span><span class="plane"></span><span class="plane"></span></div><video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/41/5b42b85fa5edc.mp4" autoplay="" loop="" muted=""></video> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1955196476" autoplay="autoplay" loop="loop"></audio>
</div>
<script>(function() {
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 script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.body.appendChild(script);
//let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
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> @马黑黑 交份作业。。。{:4_187:} 月儿这个做得好，又漂亮又温馨。那飞行的纸飞机和帖子里小朋友的纸飞机相互呼应，非常奇妙{:4_199:} 高大的父亲宠溺地抗着孩子，口袋里还有一根棒棒糖。看得让人感动，无情未必真豪杰，怜子如何不丈夫{:4_199:} 小播背后还衬有光芒。月儿的这份祝福帖很用心。跟月儿同祝论坛的父亲们节日快乐{:4_187:} 同乐同乐 欣赏月月的精彩制作{:4_178:} 今天我好郁闷，速度好卡，JS出来是代码{:4_198:} 看见效果了，月月制作太美了，加了这个歌词同步，这个播放器我也是没有玩过，月月各种效果结合的非常完美{:4_178:}
健硕的父亲带着稚嫩的孩子在草地上玩小飞机，很温馨的场景{:4_187:}， 同祝大家父亲节快乐{:4_187:} 问好老师，欣赏精彩佳作，点赞！{:4_187:} 红影 发表于 2023-6-18 10:40
月儿这个做得好，又漂亮又温馨。那飞行的纸飞机和帖子里小朋友的纸飞机相互呼应，非常奇妙
跟着惠风和畅找的纸飞机元素{:4_187:} 红影 发表于 2023-6-18 10:43
高大的父亲宠溺地抗着孩子，口袋里还有一根棒棒糖。看得让人感动，无情未必真豪杰，怜子如何不丈夫{:4_199: ...
这个反差萌一下子让人印象深刻，十分感动就选了这张图{:4_187:} 红影 发表于 2023-6-18 10:44
小播背后还衬有光芒。月儿的这份祝福帖很用心。跟月儿同祝论坛的父亲们节日快乐
{:4_170:}布灵布灵的比较好玩 马黑黑 发表于 2023-6-18 10:50
同乐同乐
昨天怎么就忘了回这个贴子~~大同世界，一起快乐 醉美水芙蓉 发表于 2023-6-18 13:35
欣赏月儿美贴！
感谢水芙蓉支持{:4_187:} 小辣椒 发表于 2023-6-18 14:13
欣赏月月的精彩制作
小辣椒来了，开心。。 小辣椒 发表于 2023-6-18 14:17
今天我好郁闷，速度好卡，JS出来是代码
那是啥原因呀，别的贴也这样么