鹰击长空代码

马黑黑

单标签帖子，没啥技术含量：

1. <style>
   
2. #mydiv {
   
3.         margin: -80px 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: url('https://638183.freep.cn/638183/t23/webp1/t3.webp') no-repeat center/cover;
   
7.         overflow: hidden;
   
8.         position: relative;
   
9.         --state: paused;
   
10. }
    
11. #mydiv::before, #mydiv::after {
    
12.         position: absolute;
    
13.         content: '';
    
14.         width: 100px;
    
15.         height: 88px;
    
16.         background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
    
17.         offset-path: path('M0 60 Q500 200,1024 60');
    
18.         offset-distance: 0%;
    
19.         animation: move 10s infinite linear var(--state);
    
20.         cursor: pointer;
    
21. }
    
22. #mydiv::after {
    
23.         offset-path: path('M0 600 Q500 400,1024 600');
    
24.         transform: scale(1,-1);
    
25.         filter: blur(1px);
    
26. }
    
27. @keyframes move { to { offset-distance: 100%; } }
    
28. </style>
    
29. 
    
30. <div id="mydiv"></div>
    
31. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=19282209" autoplay loop></audio>
    
32. 
    
33. <script>
    
34. let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
35. aud.addEventListener('play', mState, false);
    
36. aud.addEventListener('pause', mState, false);
    
37. mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
    
38. </script>
    

复制代码

红影

重点在::after里，把鹰做了镜射，还重新设置了路径，做成了水里的到影

红影

原本以为直接用倒影做的呢，结果不是

马黑黑

红影 发表于 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里，把鹰做了镜射，还重新设置了路径，做成了水里的到影

这个解释正是我需要的

红影

马黑黑 发表于 2023-4-21 20:04
倒影很难做出曲线的

哦，这个倒没注意。嗯嗯，记下了。

马黑黑

红影 发表于 2023-4-22 12:50
哦，这个倒没注意。嗯嗯，记下了。

如果做成对应主体路径的曲线，需要复杂的JS编程，算法复杂，劳动量也极大

红影

马黑黑 发表于 2023-4-21 20:41
嗯，看出来了

你这做出来的更厉害啊

马黑黑

红影 发表于 2023-4-22 20:21
你这做出来的更厉害啊

做出来的不厉害，厉害的是看出来。比方讲文学作品，写的很多，好的也很多，但很多没有影响力，原因就在于没有人“看”出来。

红影

雨中悄然 发表于 2023-4-22 12:23
这个解释正是我需要的

悄然客气，你自己肯定也能看出来的

红影

马黑黑 发表于 2023-4-22 12:57
如果做成对应主体路径的曲线，需要复杂的JS编程，算法复杂，劳动量也极大

还是这样方便，几句就解决问题了。