巧用border模拟光柱
<style>.stage {
margin: auto;
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:09 编辑 <br /><br /><pre style="padding: 8px; font-size: 12px; border: 1px solid; border-color: olive deeppink magenta tan;">
代码：
<style>
<span style='color: red;'>.stage </span>{
<span style='color: blue;'>display</span>: flex;
<span style='color: blue;'>justify-content</span>: center;
<span style='color: blue;'>width</span>: 760px;
<span style='color: blue;'>height</span>: 500px;
<span style='color: blue;'>background</span>: #000;
}
<span style='color: red;'>.light </span>{
<span style='color: blue;'>width</span>: 0px;
<span style='color: blue;'>height</span>: 0px;
<span style='color: blue;'>border</span>: 12px solid;
<span style='color: blue;'>border-color</span>: transparent white transparent transparent;
<span style='color: blue;'>filter</span>: blur(1px);
<span style='color: blue;'>opacity</span>: .6;
<span style='color: blue;'>transition</span>: .5s;
<span style='color: blue;'>transform-origin</span>: 50% 0;
<span style='color: blue;'>transform</span>: scale(50,1.2);
<span style='color: blue;'>animation</span>: rot 8s ease infinite alternate;
}
<span style='color: red;'>@keyframes rot </span>{
to { <span style='color: blue;'>transform</span>: rotate(-180deg) scale(40,2); }
}
</style>
<<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"stage"</span>>
<<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"light"</span>><<span style='color: darkred'>/div</span>>
<<span style='color: darkred'>/div</span>>
</pre>
没有用上景深。如果希望模拟3d场景，可略微加工一下：
第一步：在舞台场景（.stage选择器）加入一句，其值可调整——
perspective: 1000px;
第二步：修改光柱动画（@keyframes rot）的 rotate 属性为 rotateY——
to { transform: rotateY(-180deg); 关于 border 属性基于构建几何图形的应用，我将另开帖介绍 如果不希望光柱溢出舞台，可在 .stage 选择器加入： overflow: hidden
如果希望光柱从不同的点发出，比如左上角，那么，将 .stage 的 display 和 justify-conent 属性替换为常规的position 定位属性，.light 选择器也需要加入position，然后定位它（默认左上角）。 本帖最后由 马黑黑 于 2022-4-6 10:47 编辑
光柱的构建原理：
光柱主体选择器宽高均设定为0，等于说它没有宽高尺寸。用border（边框）各属性值来实现它的外观，border的尺寸、颜色等的设定将能构建不同的盒子样貌。
本例，border-width 设为 12 px，border-color通过透明色和实体色的配合使用，总体营造出来的外观是底部在右边的三角形，然后用scaleX将其放大为长条形的东东，这是光柱的基本形状，接近但不符合要求，故而——
加入 opacity 和 blur 滤镜，使光柱摆脱原始扁平、尖锐的观感，变成略显圆润、虚飘（尤其是尾部发虚）的样纸，看上去更像光柱。 光柱的颜色可以是深天蓝色的、蓝色的、绿色的等等 漂亮的制作，真好看！{:4_199:} 加林森 发表于 2022-4-6 11:16
漂亮的制作，真好看！
又学到了吧 马黑黑 发表于 2022-4-6 12:01
又学到了吧
是的，要运用才行。 加林森 发表于 2022-4-6 12:04
是的，要运用才行。
这是框架，你把帖子内容放里面即可。这与放个播放器差不多。
舞台（.stage）即外框，修改定位、尺寸等便可。帖子内容属于它的子元素，与光柱实体所在的盒子是并列关系。 马黑黑 发表于 2022-4-6 12:10
这是框架，你把帖子内容放里面即可。这与放个播放器差不多。
舞台（.stage）即外框，修改定位、尺寸等 ...
嗯嗯，谢谢！ 加林森 发表于 2022-4-6 12:15
嗯嗯，谢谢！
试试吧 马黑黑 发表于 2022-4-6 12:16
试试吧
嗯嗯 如果定位transform-origin: 0 0;，transform: rotateY(-45deg)，就只在左上角那里转了吧{:4_173:} 马黑黑 发表于 2022-4-6 10:34
如果不希望光柱溢出舞台，可在 .stage 选择器加入： overflow: hidden
如果希望光柱从不同的点发出，比 ...
刚说完，这里已经看到了。
这个光柱有点长，不仅仅是设置overflow: hidden防止溢出的问题，怎样弄短点，不让下面的拉条出来呢？ 马黑黑 发表于 2022-4-6 10:16
没有用上景深。如果希望模拟3d场景，可略微加工一下：
第一步：在舞台场景（.stage选择器）加入一句，其 ...
估计加景深会更好看{:4_199:} 红影 发表于 2022-4-6 13:50
估计加景深会更好看
也不一定，主要是整体效果似乎不依赖景深。景深，更多用于需要立体观感的效果。本例，若用到景深，道理上光柱指向我们时，会变得较短，不过立体感可能会强一些。 红影 发表于 2022-4-6 13:49
刚说完，这里已经看到了。
这个光柱有点长，不仅仅是设置overflow: hidden防止溢出的问题，怎样弄短点， ...
transform的scale用来放大元素，可在选择器和动画那里修改它的值 红影 发表于 2022-4-6 13:47
如果定位transform-origin: 0 0;，transform: rotateY(-45deg)，就只在左上角那里转了吧
基点要结合多种因素决定吧。想这个光柱，头部纤细，所以我设置基点的x值为50%。多试试，效果满意就好
页:
[1]
2