马黑黑 发表于 2025-7-24 13:26

立体感很强的小播样式

<style>
    .ma {
      position: relative;
      width: 300px;
      height: 300px;
      filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.5));
      animation: rot 8s linear infinite;
      margin: 100px auto;
    }
    .son {
      position: absolute;
      width: 50%;
      height: 50%;
      background: radial-gradient(at 15% 15%, gold, yellow);
      border-radius: 50%100% 0 100%;
      box-shadow: inset 0 0 34px rgba(120, 110, 0, 1);
    }
    .son::before, .son::after {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: inherit;
      box-shadow: inherit;
      transform-origin: 100% 100%;
      transform: rotate(120deg);
    }
    .son::after {
      transform: rotate(240deg);
    }
    @keyframes rot {
      to { transform: rotate(360deg); }
    }
</style>

<div class="ma">
    <div class="son"></div>
</div>

马黑黑 发表于 2025-7-24 13:28

参考代码

<style>
    .ma {
      position: absolute;
      left: 20%;
      top: 20%;
      width: 300px;
      height: 300px;
      filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.5));
      animation: rot 8s linear infinite;
    }
    .son {
      position: absolute;
      width: 50%;
      height: 50%;
      background: radial-gradient(at 15% 15%, gold, yellow);
      border-radius: 50%100% 0 100%;
      box-shadow: inset 0 0 34px rgba(120, 110, 0, 1);
    }
    .son::before, .son::after {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: inherit;
      box-shadow: inherit;
      transform-origin: 100% 100%;
      transform: rotate(120deg);
    }
    .son::after {
      transform: rotate(240deg);
    }
    @keyframes rot {
      to { transform: rotate(360deg); }
    }
</style>

<div class="ma">
    <div class="son"></div>
</div>

马黑黑 发表于 2025-7-24 13:36

营造立体感的核心：

容器元素的 .ma {} 选择器应用 filter 滤镜阴影函数 drop-shadow()，它不能直接使用 box-shadow() 阴影函数，否则会出现矩形阴影，难看S；

子元素的 .son 选择器直接使用 box-shadow() 函数制造阴影，因为它是单一的形状可以酱紫。两个伪元素继承（inherit）了包含阴影在内的诸多个属性值，这样修改时只需要修改主元素的设置。子元素使用的是内阴影，以此增强质感（透明度暂设为1，可以考虑使用 0.x 的值，x大于0小于等于1）。

杨帆 发表于 2025-7-24 20:09

本帖最后由 杨帆 于 2025-7-24 20:13 编辑

又一个极富立体感的小播按钮诞生了，谢谢马老师再度推出新品{:4_190:}

红影 发表于 2025-7-24 20:31

马黑黑 发表于 2025-7-24 13:36
营造立体感的核心：

容器元素的 .ma {} 选择器应用 filter 滤镜阴影函数 drop-shadow()，它不能直接使用 ...

内阴影，设置成1不是很正常么，为什么要在0和1之间呢{:4_173:}

红影 发表于 2025-7-24 20:33

原来两种阴影不能随便乱用。
不是3D的立体感小播{:4_199:}

马黑黑 发表于 2025-7-24 21:44

杨帆 发表于 2025-7-24 20:09
又一个极富立体感的小播按钮诞生了，谢谢马老师再度推出新品

这是没有启用3d环境下的模拟效果

马黑黑 发表于 2025-7-24 21:46

红影 发表于 2025-7-24 20:33
原来两种阴影不能随便乱用。
不是3D的立体感小播

这需要看形状。如果只是自己边框弄成的形状等，直接使用 box-shadow 合适，如果带有其它有形状的元素，得用滤镜方式。可以自己尝试体验。

马黑黑 发表于 2025-7-24 21:48

红影 发表于 2025-7-24 20:31
内阴影，设置成1不是很正常么，为什么要在0和1之间呢

我说的是 rgba(...) 中的 a 暂时设置为 1 ，没有透明度。颜色的alpha通道开启，阴影效果应该更理想。

阴影自身有一个透明度参数，再加上颜色也带透明度，会更神奇。

红影 发表于 2025-7-24 22:29

马黑黑 发表于 2025-7-24 21:46
这需要看形状。如果只是自己边框弄成的形状等，直接使用 box-shadow 合适，如果带有其它有形状的元素，得 ...

这个好像以前黑黑就说过，但我们两种阴影本来就没弄清楚{:4_173:}

红影 发表于 2025-7-24 22:31

马黑黑 发表于 2025-7-24 21:48
我说的是 rgba(...) 中的 a 暂时设置为 1 ，没有透明度。颜色的alpha通道开启，阴影效果应该更理想。

...

哦哦，原来是说的这个。是的，阴影有透明度，再加上颜色透明度，的确会营造出神奇的效果呢{:4_187:}

马黑黑 发表于 2025-7-24 22:33

红影 发表于 2025-7-24 22:29
这个好像以前黑黑就说过，但我们两种阴影本来就没弄清楚

滤镜阴影 filter: drop-shadow() 是投射阴影，它有透视功能，仅对存在的形状投射出阴影；

box-shadow 阴影基于盒子模型，它制造出的阴影可能是矩形的，特定情况下它也具备透视功能。

马黑黑 发表于 2025-7-24 22:36

红影 发表于 2025-7-24 22:31
哦哦，原来是说的这个。是的，阴影有透明度，再加上颜色透明度，的确会营造出神奇的效果呢

很多人主张做盒子阴影应该酱紫做

红影 发表于 2025-7-24 22:46

马黑黑 发表于 2025-7-24 22:33
滤镜阴影 filter: drop-shadow() 是投射阴影，它有透视功能，仅对存在的形状投射出阴影；

box-shadow...

原来是这样，看起来滤镜阴影的应用更广泛啊。

红影 发表于 2025-7-24 22:48

马黑黑 发表于 2025-7-24 22:36
很多人主张做盒子阴影应该酱紫做

是因为效果更好吧。

马黑黑 发表于 2025-7-25 18:06

红影 发表于 2025-7-24 22:48
是因为效果更好吧。

应该是的

马黑黑 发表于 2025-7-25 18:09

红影 发表于 2025-7-24 22:46
原来是这样，看起来滤镜阴影的应用更广泛啊。

它不会在意外的情况下产生矩形阴影，除非盒子本身就是矩形。

具体点说，filter投射阴影时会自动过滤掉影像的透明部分，只有呈现出来的部分才会产生阴影。

box-shadow 在很多情况下也能过滤透明部分，但它不总是能过滤。

红影 发表于 2025-7-25 21:47

马黑黑 发表于 2025-7-25 18:06
应该是的

透明度营造的梦幻效果。

红影 发表于 2025-7-25 21:48

马黑黑 发表于 2025-7-25 18:09
它不会在意外的情况下产生矩形阴影，除非盒子本身就是矩形。

具体点说，filter投射阴影时会自动过滤掉 ...

那就尽量使用filter阴影呗，少用盒子阴影？
页: [1]
查看完整版本: 立体感很强的小播样式