巧用border模拟光柱

马黑黑 · 发表于 2022-4-6 10:04

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

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

x

马黑黑 · 发表于 2022-4-6 10:07

本帖最后由马黑黑于 2022-4-6 10:09 编辑

代码：

<style>
.stage {
   display: flex;
   justify-content: center;
   width: 760px;
   height: 500px;
   background: #000;
}
.light {
   width: 0px;
   height: 0px;
   border: 12px solid;
   border-color: transparent white transparent transparent;
   filter: blur(1px);
   opacity: .6;
   transition: .5s;
   transform-origin: 50% 0;
   transform: scale(50,1.2);
   animation: rot 8s ease infinite alternate;
}

@keyframes rot {
   to { transform: rotate(-180deg) scale(40,2); }
}
</style>

<div class="stage">
   <div class="light"></div>
</div>

马黑黑 · 发表于 2022-4-6 10:16

没有用上景深。如果希望模拟3d场景，可略微加工一下：

第一步：在舞台场景（.stage选择器）加入一句，其值可调整——

perspective: 1000px;

第二步：修改光柱动画（@keyframes rot）的 rotate 属性为 rotateY——

to { transform: rotateY(-180deg);

马黑黑 · 发表于 2022-4-6 10:17

关于 border 属性基于构建几何图形的应用，我将另开帖介绍

马黑黑 · 发表于 2022-4-6 10:34

如果不希望光柱溢出舞台，可在 .stage 选择器加入： overflow: hidden

如果希望光柱从不同的点发出，比如左上角，那么，将 .stage 的 display 和 justify-conent 属性替换为常规的position 定位属性，.light 选择器也需要加入position，然后定位它（默认左上角）。

马黑黑 · 发表于 2022-4-6 10:45

本帖最后由马黑黑于 2022-4-6 10:47 编辑

光柱的构建原理：

光柱主体选择器宽高均设定为0，等于说它没有宽高尺寸。用border（边框）各属性值来实现它的外观，border的尺寸、颜色等的设定将能构建不同的盒子样貌。

本例，border-width 设为 12 px，border-color通过透明色和实体色的配合使用，总体营造出来的外观是底部在右边的三角形，然后用scaleX将其放大为长条形的东东，这是光柱的基本形状，接近但不符合要求，故而——

加入 opacity 和 blur 滤镜，使光柱摆脱原始扁平、尖锐的观感，变成略显圆润、虚飘（尤其是尾部发虚）的样纸，看上去更像光柱。