鹰击长空代码
单标签帖子，没啥技术含量：<style>
#mydiv {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t23/webp1/t3.webp') no-repeat center/cover;
overflow: hidden;
position: relative;
--state: paused;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
width: 100px;
height: 88px;
background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
offset-path: path('M0 60 Q500 200,1024 60');
offset-distance: 0%;
animation: move 10s infinite linear var(--state);
cursor: pointer;
}
#mydiv::after {
offset-path: path('M0 600 Q500 400,1024 600');
transform: scale(1,-1);
filter: blur(1px);
}
@keyframes move { to { offset-distance: 100%; } }
</style>
<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=19282209" autoplay loop></audio>
<script>
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
重点在::after里，把鹰做了镜射，还重新设置了路径，做成了水里的到影{:4_173:} 原本以为直接用倒影做的呢，结果不是{:4_173:} 红影 发表于 2023-4-21 19:52
原本以为直接用倒影做的呢，结果不是
倒影很难做出曲线的 等我好点了再来学习。 加林森 发表于 2023-4-21 20:19
等我好点了再来学习。
不急不急 红影 发表于 2023-4-21 19:52
重点在::after里，把鹰做了镜射，还重新设置了路径，做成了水里的到影
嗯，看出来了 马黑黑 发表于 2023-4-21 20:38
不急不急
好的。 加林森 发表于 2023-4-21 20:45
好的。
慢慢来 马黑黑 发表于 2023-4-21 20:45
慢慢来
好的。 加林森 发表于 2023-4-21 20:50
好的。
88 醉美水芙蓉 发表于 2023-4-22 07:04
技术含量多着呢，黑黑老师谦虚了！
早上好 红影 发表于 2023-4-21 19:52
重点在::after里，把鹰做了镜射，还重新设置了路径，做成了水里的到影
这个解释正是我需要的{:4_173:}{:4_187:} 马黑黑 发表于 2023-4-21 20:04
倒影很难做出曲线的
哦，这个倒没注意。嗯嗯，记下了。 红影 发表于 2023-4-22 12:50
哦，这个倒没注意。嗯嗯，记下了。
如果做成对应主体路径的曲线，需要复杂的JS编程，算法复杂，劳动量也极大 马黑黑 发表于 2023-4-21 20:41
嗯，看出来了
你这做出来的更厉害啊{:4_199:} 红影 发表于 2023-4-22 20:21
你这做出来的更厉害啊
做出来的不厉害，厉害的是看出来。比方讲文学作品，写的很多，好的也很多，但很多没有影响力，原因就在于没有人“看”出来。 雨中悄然 发表于 2023-4-22 12:23
这个解释正是我需要的
悄然客气，你自己肯定也能看出来的{:4_173:} 马黑黑 发表于 2023-4-22 12:57
如果做成对应主体路径的曲线，需要复杂的JS编程，算法复杂，劳动量也极大
还是这样方便，几句就解决问题了。
页:
[1]
2