小播filter阴影演示

马黑黑 发表于 2025-8-1 08:24

马黑黑 发表于 2025-8-1 08:25

一楼效果完整代码

<style>
.wrap {
   margin: 20px auto;
   position: relative;
   width: fit-content;
   height: fit-content;
   filter: drop-shadow(-40px 80px 0px rgba(0, 0, 0, .05));
}
.ma {
   --size: 240px;
   position: relative;
   width: var(--size);
   height: var(--size);
   display: grid;
   place-items: center;
   transform: rotateX(45deg) rotateY(15deg);
   animation: rot 8s linear infinite;
}
.ma::after {
   content: '';
   position: absolute;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: radial-gradient(skyblue, snow);
}
.son {
   position: absolute;
   width: 100%;
   height: 4px;
   background: repeating-radial-gradient(circle, var(--bg1), var(--bg2), var(--bg1) 30%);
   transform: rotate(var(--a));
   --a: 90deg;
}
.son::before, .son::after {
   content: '';
   position: absolute;
   left: 0;
   top: calc(50% - 15px);
   width: 30px;
   height: 30px;
   background: inherit;
   border-radius: 50%;
   filter: drop-shadow(0 0 6px rgba(0,0,0,.5));
}
.son::after {
   left: calc(100% - 30px);
}
@keyframes rot {
   to { transform: rotateX(45deg) rotateY(15deg) rotateZ(360deg); }
}
</style>

<div class="wrap">
<div id="ma" class="ma"></div>
</div>

<script>
var tt = 6;
Array.from({length: tt}).forEach( (s,k) => {
   s = document.createElement('span');
   s.classList.add('son');
   s.style.cssText += `
         --a: ${180 / tt * k}deg;
         --bg1: #${Math.random().toString(16).substring(2,8)};
         --bg2: #${Math.random().toString(16).substring(2,8)};
   `;
   ma.appendChild(s);
});
</script>

马黑黑 发表于 2025-8-1 08:43

.ma + .son 是构建小播对应组件的CSS选择器，可以随意设计，或仅使用一张背景透明的图片替代。

核心是外包装，即，给 .ma 设计一个容器，阴影由该容器使用 filter 滤镜属性 + drop-shadow() 函数实现。

之所以引入一个容器，而不是直接使用 .ma 来投射阴影，主要因为：.ma 可能会执行CSS关键帧动画，阴影会跟随运动，可能存在较大范围的活动幅度，而引入的容器它只是容器，不给其设置animation属性，它投射的阴影相对安静、能恰当地表现其内元素的轮廓。

drop-shadow 函数带四个参数，写成：

   drop-shadow(x-offset y-offset blur color)

其中：

   x-offset : 水平方向偏移量，例如，向左偏移5个像素，-5px，向右偏移20个像素，20px
   y-offset : 垂直方向偏移量，例如，向上偏移10个像素，-10px，向下偏移100个像素，100px
   blur : 阴影模糊距离（或称模糊半径，blur-radius），值为大于等于0的整数，例如模糊距离6个像素，6px
   color : 阴影的颜色，支持任何一种H5所能接受的颜色表达法，例如，gray，#333，rgba(0,0,0,.5) 等等

梦江南 发表于 2025-8-1 10:12

问好老师，谢谢精彩分享。

红影发表于 2025-8-1 10:26

让容器使用 filter 滤镜创造阴影，这样投射的阴影相对安静。还是头一次知道呢。
学习了{:4_187:}

红影发表于 2025-8-1 10:28

这个ma 做了transform: rotateX(45deg) rotateY(15deg); ，感觉像是三维图像了，这样的阴影真漂亮{:4_199:}

红影发表于 2025-8-1 10:30

son的background: repeating-radial-gradient(circle, var(--bg1), var(--bg2), var(--bg1) 30%);设置有意思，不但小球带了圆环，连那杆子上都有花纹了。

马黑黑 发表于 2025-8-1 12:27

红影发表于 2025-8-1 10:30
son的background: repeating-radial-gradient(circle, var(--bg1), var(--bg2), var(--bg1) 30%);设置有意 ...

纹个身又不是整容{:4_170:}

马黑黑 发表于 2025-8-1 12:28

红影发表于 2025-8-1 10:28
这个ma 做了transform: rotateX(45deg) rotateY(15deg); ，感觉像是三维图像了，这样的阴影真漂亮

不过这个是2d的

马黑黑 发表于 2025-8-1 12:28

红影发表于 2025-8-1 10:26
让容器使用 filter 滤镜创造阴影，这样投射的阴影相对安静。还是头一次知道呢。
学习了

这个构思其实是简单的

马黑黑 发表于 2025-8-1 12:28

梦江南发表于 2025-8-1 10:12
问好老师，谢谢精彩分享。

{:4_190:}

杨帆发表于 2025-8-1 16:16

奇妙构思，美妙效果，谢谢马老师精彩分享{:4_190:}

马黑黑 发表于 2025-8-1 18:35

杨帆发表于 2025-8-1 16:16
奇妙构思，美妙效果，谢谢马老师精彩分享

{:4_191:}

红影发表于 2025-8-1 18:56

马黑黑发表于 2025-8-1 12:27
纹个身又不是整容

问题是纹身纹了全身啊{:4_172:}

红影发表于 2025-8-1 18:56

马黑黑发表于 2025-8-1 12:28
不过这个是2d的

是啊，两维的呈现了三维效果呢。

红影发表于 2025-8-1 18:57

马黑黑发表于 2025-8-1 12:28
这个构思其实是简单的

多弄个容器，这个构思还是挺别致的{:4_187:}

马黑黑 发表于 2025-8-1 20:01

红影发表于 2025-8-1 18:57
多弄个容器，这个构思还是挺别致的

这没啥呀。

旋转的对象如果阴影设置了偏移，那么，阴影的转动幅度会很大的，而容器不转动，所以阴影只是如实反映其投射的对象

马黑黑 发表于 2025-8-1 20:02

红影发表于 2025-8-1 18:56
是啊，两维的呈现了三维效果呢。

那倒不是，它是偏平的

马黑黑 发表于 2025-8-1 20:03

红影发表于 2025-8-1 18:56
问题是纹身纹了全身啊

美不美也得看看纹的是谁

红影发表于 2025-8-1 20:29

马黑黑发表于 2025-8-1 20:01
这没啥呀。

旋转的对象如果阴影设置了偏移，那么，阴影的转动幅度会很大的，而容器不转动，所以阴影只 ...

嗯嗯，记下了，旋转的对象最好不设阴影，在它的容器里设置就好{:4_187:}

页: [1] 2 3 4

花潮论坛's Archiver

小播filter阴影演示