《我要的飞翔》（学习黑黑《小池塘》效果）
<style>
#tiezi { margin: 60px 0 20px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/66437fa50ea9cb140341de8f.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px #000; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
#tiezi > canvas:nth-of-type(1) { position: absolute; top: 236px; cursor: pointer; }
#tiezi > video:nth-of-type(1) { position: absolute; left: 0px; top: -140px; width: 100%; height: 760px;mix-blend-mode:screen; opacity: 0.6;}
#tiezi > img:nth-of-type(1) { position: absolute; bottom: 20px; width: 139px; left: 50px; cursor: pointer; user-select: none; transform-origin: 50% 100%; animation: swear linear 1s infinite alternate var(--state); }
#pic { position: absolute; bottom: 211px; width: 117px; right: 30px;transform-origin: bottom center; animation: swear linear .65s infinite alternate var(--state); }
@keyframes swear { from { transform: skewY(5deg); } to { transform: skewY(-5deg); } }
</style>
<div id="tiezi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2154088217" autoplay></audio>
<img id="mypic" src="https://pic.imgdb.cn/item/664381f40ea9cb14034747f6.png" alt="" />
<img id="pic" src="https://pic.imgdb.cn/item/6643827a0ea9cb14034959c2.png" alt="" />
<video src="https://img.tukuppt.com/video_show/2269348/00/14/91/5e67a3160237e_10s_big.mp4" loop muted></video>
<canvas width="170" height="170"></canvas>
</div>
<script>
var files = [
'https://638183.freep.cn/638183/web/js2024/lrc_only.js',
'https://638183.freep.cn/638183/web/js2024/3dball.js'
];
files.forEach((_, key) => {
var sF = document.createElement('script');
sF.charset = 'UTF-8';
sF.src = files;
document.body.appendChild(sF);
sF.onload = () => {
if(key === 0) {
LRC({
papa: '#tiezi',
lrc_css: 'top: 40px; color: rgba(250,251,224,.9); --bg: linear-gradient(rgba(255,232,184,.2), rgba(255,174,0,.6))',
lrcAr: geci
});
}
else mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
};
});
var lz = {papa: tiezi, total: 350, r: 4, color: '#FFA500'};
var geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script> 我要的飞翔，用来说网球应该差不多，那个就应该在天空飞翔的吧{:4_173:} 看到@马黑黑 帖子里一串的nth-of-type() ，就想着应该能多加几个图图的吧，试了一下，不是想象的那样呢。
不管怎么说弄了2个打球的人还是弄上去了，也觉得开心{:4_205:} 本帖最后由 马黑黑 于 2024-5-15 23:35 编辑
红影 发表于 2024-5-15 22:47
看到@马黑黑 帖子里一串的nth-of-type() ，就想着应该能多加几个图图的吧，试了一下，不是想象的那样呢。
...
你总共用了三次 #tiezi > canvas:nth-of-type(1)
并且，canvas里面的绘制内容是不可以通过CSS实现的。CSS只是规定了元素的外观样式，canvas画布则需要JS具体指挥画笔去作画
这歌好熟悉啊，好像是《一起来看流星雨》里的插曲。 https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2024%2F04%2F2106%2F282656492_1_20240421062334259.jpeg&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1718407675&t=9c371903b81fcef5bb7d6a114ec8ac56 有的网球球员的动作非常美，真像是空中飞人。 很漂亮，赞！ 亲爱的。你这个粒子颜色可以修改？ 想象力丰富，画面很有场景感{:4_199:} 这个人物和粒子播放器有联动控制效果的，现在2个人物好像点击了没有停止了，粒子按钮完美的 欣赏亲爱的精美的制作，好厉害哦，这个画面感特别美 马黑黑 发表于 2024-5-15 23:33
你总共用了三次 #tiezi > canvas:nth-of-type(1)
并且，canvas里面的绘制内容是不可以通过CSS实现的。 ...
不是加canvas里啊，是想加img里的，还以为弄个2就可以了，结果不是的呢{:4_173:} 愤怒的葡萄 发表于 2024-5-16 06:51
这歌好熟悉啊，好像是《一起来看流星雨》里的插曲。
是的呢，葡萄厉害，这都知道啊{:4_173:} 起个网名好难 发表于 2024-5-16 07:28
谢谢难难，一早就出去了，回复迟了。
这么美的花儿，让人心情好好呢{:4_187:} 梦油 发表于 2024-5-16 09:06
有的网球球员的动作非常美，真像是空中飞人。
让它们动一下，假装是在打球{:4_173:} 小文 发表于 2024-5-16 10:31
很漂亮，赞！
谢谢小文鼓励{:4_187:} 小辣椒 发表于 2024-5-16 16:21
亲爱的。你这个粒子颜色可以修改？
可以改的啊，黑黑的讲解帖里说过的呢，var lz = {papa: tiezi, total: 350, r: 4, color: '#FFA500'}; 小辣椒 发表于 2024-5-16 16:22
想象力丰富，画面很有场景感
想做这个球状粒子，正好找了个网球的图图，就加了两个小人{:4_173:} 小辣椒 发表于 2024-5-16 16:23
这个人物和粒子播放器有联动控制效果的，现在2个人物好像点击了没有停止了，粒子按钮完美的
有粒子可以点击就行了，把人物上手型拿掉了{:4_173:}