论坛 › 马黑黑教程专版 › CSS+HTML : 金球藏娇

马黑黑 发表于 2025-7-12 12:31

CSS+HTML : 金球藏娇

<style>
    #ball {
      --size: 200px;
      margin: 200px calc(50% - var(--size) / 2);
      position: relative;
      width: var(--size);
      height: var(--size);
      background: url('https://638183.freep.cn/638183/t22/rabbit.gif') no-repeat center/cover;
      border-radius: 50%;
      filter: drop-shadow(10px 10px 20px #333);
    }
    #ball::before, #ball::after {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, yellow, gold);
      border-radius: 50%;
    }
    #ball::before {
      transform-origin: 100% 50%;
      transition: 0.5s;
      clip-path: inset(0 0 50% 0);
      z-index: 1;
    }
    #ball::after {
      clip-path: inset(50% 0 0 0);
    }
    #ball:hover::before {
      transform: rotate(90deg);
    }
</style>

<div id="ball"></div>

马黑黑 发表于 2025-7-12 12:31

参考代码

<style>
    #ball {
      --size: 200px;
      margin: 200px calc(50% - var(--size) / 2);
      position: relative;
      width: var(--size);
      height: var(--size);
      background: url('https://638183.freep.cn/638183/t22/rabbit.gif') no-repeat center/cover;
      border-radius: 50%;
      filter: drop-shadow(10px 10px 20px #333);
    }
    #ball::before, #ball::after {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, yellow, gold);
      border-radius: 50%;
    }
    #ball::before {
      transform-origin: 100% 50%;
      transition: 0.5s;
      clip-path: inset(0 0 50% 0);
      z-index: 1;
    }
    #ball::after {
      clip-path: inset(50% 0 0 0);
    }
    #ball:hover::before {
      transform: rotate(90deg);
    }
</style>

<div id="ball"></div>

马黑黑 发表于 2025-7-12 12:32

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

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

马黑黑 发表于 2025-7-12 12:34

总体思路：

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

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

马黑黑 发表于 2025-7-12 12:35

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

红影 发表于 2025-7-12 12:50

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

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

这个版本的好，左右打开的，连兔子的脚都看到了{:4_204:}

杨帆 发表于 2025-7-12 12:51

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

马黑黑 发表于 2025-7-12 12:52

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

{:4_180:}

马黑黑 发表于 2025-7-12 12:53

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

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

红影 发表于 2025-7-12 12:55

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

开盖见兔子，这个制作真好玩{:4_173:}

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

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

{:4_172:}

红影 发表于 2025-7-12 20:08

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

还有什么样的？{:4_173:}

红影 发表于 2025-7-12 20:09

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


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

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

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

反正应该都是惊喜

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

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

这个可以充分想象

红影 发表于 2025-7-13 16:20

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

也有可能是惊吓{:4_173:}

红影 发表于 2025-7-13 16:21

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

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

马黑黑 发表于 2025-7-13 17:45

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

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

马黑黑 发表于 2025-7-13 17:46

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

这个，万事皆有可能

红影 发表于 2025-7-13 21:04

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

其他还有什么样的动作，我就想不出了{:4_173:}

查看完整版本: CSS+HTML : 金球藏娇