狐伎

马黑黑

马黑黑

1. <style>
   
2. /* 地板 */
   
3. .floor {
   
4.         left: -20px;
   
5.         width: 800px;
   
6.         height: 600px;
   
7.         background: repeating-linear-gradient(-45deg, transparent, transparent 25%, #f55 0, #f55 50% ), repeating-linear-gradient(45deg, transparent, transparent 25%, #55f 0, #55f 50% ), #efb;
   
8.         background-size: 400px 400px;
   
9.         background-blend-mode: multiply;
   
10.         box-shadow: 4px 4px 8px 0 #444;
    
11.         display: flex;
    
12.         position: relative;
    
13. }
    
14. /* 球 */
    
15. .ball {
    
16.         margin: 100px auto 0;
    
17.         width: 200px;
    
18.         height: 200px;
    
19.         border-radius: 50%;
    
20.         background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
    
21.         position: relative;
    
22.         animation: up 1s linear infinite alternate;
    
23. }
    
24. /* 球的伪元素一：底部阴影 */
    
25. .ball::before {
    
26.         position: absolute;
    
27.         content: '';
    
28.         width: 100px;
    
29.         height: 50px;
    
30.         left: calc(50% - 50px);
    
31.         top: 300px;
    
32.         border-radius: 50%;
    
33.         background: rgba(0, 0, 0, .1);
    
34.         filter: blur(1px);
    
35.         animation: down 1s linear infinite alternate;
    
36. }
    
37. /* 球的伪元素二：顶部光影 */
    
38. .ball::after {
    
39.         content: "";
    
40.         position: absolute;
    
41.         top: 1%;
    
42.         left: 5%;
    
43.         width: 90%;
    
44.         height: 90%;
    
45.         border-radius: 50%;
    
46.         background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%); filter: blur(5px);
    
47. }
    
48. /* 图片定位与混合滤镜 */
    
49. .gif {
    
50.         position: absolute;
    
51.         bottom: 0;
    
52.         mix-blend-mode: multiply;
    
53.         cursor: pointer;
    
54. }
    
55. /* 关键帧动画：球上下弹跳 */
    
56. @keyframes up {
    
57.         to { transform: translateY(100px); }
    
58. }
    
59. /* 关键帧动画：阴影变化 */
    
60. @keyframes down {
    
61.         to { transform: translateY(-100px) scale(1.2); }
    
62. }
    
63. </style>
    
64. 
    
65. <div class="floor">
    
66.         <div class="ball"></div>
    
67.         <img class="gif" src="/data/attachment/forum/202206/04/092536dnh2hngqz2t2sfxe.gif" alt="" />
    
68. </div>
    
69. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1863430078.mp3" autoplay="autoplay" loop="loop"></audio>
    
70. 
    
71. <script>
    
72. 
    
73. let aud = document.querySelector('#aud'), gif = document.querySelector('.gif');
    
74. gif.onclick = () => aud.paused ? aud.play() : aud.pause();
    
75. 
    
76. </script>

复制代码

马黑黑

球是国际大佬画的，我没有做任何改动，仅加入其中一个伪元素做阴影、球和阴影的动画

红影

那狐狸是吃兴奋剂了么，跳得那么嗨

红影

这球球和阴影真漂亮，谁能想到这么漂亮的图图是纯代码弄出来的，太神奇了

加林森

好漂亮的制作，老狐狸扭秧歌吗？

红影

这狐狸原来不是透明的。又一次见识了运用滤镜让动图背景变不可见的神奇了。
这样真方便，就不用刻意去寻找透明动图了

红影

背景设计也很漂亮，两个角度的线性渐变，使用滤镜混合，让各种交汇的颜色都发生了变化。
在黑黑这总能学到很多东西

马黑黑

红影 发表于 2022-6-4 10:12
背景设计也很漂亮，两个角度的线性渐变，使用滤镜混合，让各种交汇的颜色都发生了变化。
在黑黑这总能学到 ...

看样子你对代码的理解日臻成熟了

马黑黑

红影 发表于 2022-6-4 09:51
那狐狸是吃兴奋剂了么，跳得那么嗨

这曲子叫狐伎，是伴奏。它是主角。

马黑黑

红影 发表于 2022-6-4 10:00
这狐狸原来不是透明的。又一次见识了运用滤镜让动图背景变不可见的神奇了。
这样真方便，就不用刻意去寻找 ...

APP处理图形效果更好

马黑黑

加林森 发表于 2022-6-4 09:58
好漂亮的制作，老狐狸扭秧歌吗？

什么老狐狸呀？还没成精的

马黑黑

红影 发表于 2022-6-4 09:58
这球球和阴影真漂亮，谁能想到这么漂亮的图图是纯代码弄出来的，太神奇了

CSS还是不错的

加林森

马黑黑 发表于 2022-6-4 10:20
什么老狐狸呀？还没成精的

难道吃了摇头丸了？跳得这么嗨。。。。。

马黑黑

加林森 发表于 2022-6-4 10:33
难道吃了摇头丸了？跳得这么嗨。。。。。

不会的吧？这是违法的，狐狸不敢做那事

加林森

马黑黑 发表于 2022-6-4 10:35
不会的吧？这是违法的，狐狸不敢做那事

我怎么看怎么都像吃了兴奋剂的。。。。

马黑黑

加林森 发表于 2022-6-4 10:38
我怎么看怎么都像吃了兴奋剂的。。。。

没关系，你去举报也没用，测不出问题来

马黑黑

醉美水芙蓉 发表于 2022-6-4 10:43
这只狐狸好嘚瑟！进来欣赏黑黑老师神奇的制作！

嘚瑟才有个性

东篱闲人

跳的疯狂！