CSS+HTML : 金球藏娇

马黑黑

马黑黑

参考代码

1. <style>
   
2.     #ball {
   
3.         --size: 200px;
   
4.         margin: 200px calc(50% - var(--size) / 2);
   
5.         position: relative;
   
6.         width: var(--size);
   
7.         height: var(--size);
   
8.         background: url('https://638183.freep.cn/638183/t22/rabbit.gif') no-repeat center/cover;
   
9.         border-radius: 50%;
   
10.         filter: drop-shadow(10px 10px 20px #333);
    
11.     }
    
12.     #ball::before, #ball::after {
    
13.         position: absolute;
    
14.         content: '';
    
15.         width: 100%;
    
16.         height: 100%;
    
17.         background: linear-gradient(45deg, yellow, gold);
    
18.         border-radius: 50%;
    
19.     }
    
20.     #ball::before {
    
21.         transform-origin: 100% 50%;
    
22.         transition: 0.5s;
    
23.         clip-path: inset(0 0 50% 0);
    
24.         z-index: 1;
    
25.     }
    
26.     #ball::after {
    
27.         clip-path: inset(50% 0 0 0);
    
28.     }
    
29.     #ball:hover::before {
    
30.         transform: rotate(90deg);
    
31.     }
    
32. </style>
    
33. 
    
34. <div id="ball"></div>

复制代码

马黑黑

另一个版本（设计细节有所不同）：

http://mhh.52qingyin.cn/art/show ... rt=mahei_1752289057

马黑黑

总体思路：

圆球的构成是两个伪元素，它们在X方向各切去一半在拼装；

里面的兔子，是主元素的 background 背景图。

马黑黑

24行代码给伪元素 ::before 设置 z-index，这样，如果 ball 内还有其它子元素，它们也不会露馅，打开盖子才能看见。

红影

马黑黑 发表于 2025-7-12 12:32
另一个版本（设计细节有所不同）：

http://mhh.52qingyin.cn/art/show.php?st=4&sd=4&art=mahei_1752289 ...

这个版本的好，左右打开的，连兔子的脚都看到了

杨帆

新颖的构思，巧妙的实现，奇特的效果，谢谢马老师经典分享

马黑黑

杨帆 发表于 2025-7-12 12:51
新颖的构思，巧妙的实现，奇特的效果，谢谢马老师经典分享

马黑黑

红影 发表于 2025-7-12 12:50
这个版本的好，左右打开的，连兔子的脚都看到了

打开方式还可以设计成别的

红影

马黑黑 发表于 2025-7-12 12:35
24行代码给伪元素 ::before 设置 z-index，这样，如果 ball 内还有其它子元素，它们也不会露馅，打开盖子才 ...

开盖见兔子，这个制作真好玩

马黑黑

红影 发表于 2025-7-12 12:55
开盖见兔子，这个制作真好玩

红影

马黑黑 发表于 2025-7-12 12:53
打开方式还可以设计成别的

还有什么样的？

红影

马黑黑 发表于 2025-7-12 13:18

当然也可以是开盖见别的，那就要看下面藏的是什么了

马黑黑

红影 发表于 2025-7-12 20:09
当然也可以是开盖见别的，那就要看下面藏的是什么了

反正应该都是惊喜

马黑黑

红影 发表于 2025-7-12 20:08
还有什么样的？

这个可以充分想象

红影

马黑黑 发表于 2025-7-13 12:38
反正应该都是惊喜

也有可能是惊吓

红影

马黑黑 发表于 2025-7-13 12:38
这个可以充分想象

还有往两边拉开的，记得你以前做过的。

马黑黑

红影 发表于 2025-7-13 16:21
还有往两边拉开的，记得你以前做过的。

对呀，尽管发挥想象力，想象力就是创造力

马黑黑

红影 发表于 2025-7-13 16:20
也有可能是惊吓

这个，万事皆有可能

红影

马黑黑 发表于 2025-7-13 17:45
对呀，尽管发挥想象力，想象力就是创造力

其他还有什么样的动作，我就想不出了