小播filter阴影演示

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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) 等等