论坛 › 马黑黑教程专版 › 假戏真做：仅一个div模拟光影效果

马黑黑 发表于 2022-1-26 10:53

假戏真做：仅一个div模拟光影效果

思路：div做场景，它的两个伪元素做光柱并定位、透明、旋转。

代码：

<style type="text/css">
/* 主窗体 */
.kBox {
        margin: 10px auto;
        width: 600px;
        height: 420px;
        background: #000;
        position: relative; /* 相对定位：必须 */
}
/* 主窗体伪元素共同样式 */
.kBox::before, .kBox::after {
        content: ""; /* 伪元素起作用的关键 */
        position: absolute; /* 绝对定位：必须 */
        width: 360px; /* 光影长度 */
        height: 2px; /* 光影高度 */
        background:#eee;
        left: 120px;
        top: 50%;
        opacity: 0.2; /* 透明度：0-1之间 */
}
/* 主窗体伪元素各自样式 可重新定义高宽、播放动画数据等 */
.kBox::before {
        animation: ro 4s ease-in-out infinite; /* alternate; */
}
.kBox::after {
        transform: rotate(90deg); /* 旋转90度令其与另一个伪元素构成十字架 */
        animation: ro 2s linear infinite;
}
/* 旋转动画 可加入更丰富的变化*/
@keyframes ro {
        100% { transform: rotate(360deg); }
}

</style>

<div class="kBox"></div>

马黑黑 发表于 2022-1-26 10:54

<style type="text/css">
/* 主窗体 */
.kBox {
        margin: 10px auto;
        width: 600px;
        height: 420px;
        background: #000;
        position: relative; /* 相对定位：必须 */
}
/* 主窗体伪元素共同样式 */
.kBox::before, .kBox::after {
        content: ""; /* 伪元素起作用的关键 */
        position: absolute; /* 绝对定位：必须 */
        width: 360px; /* 光影长度 */
        height: 2px; /* 光影高度 */
        background:#eee;
        left: 120px;
        top: 50%;
        opacity: 0.2; /* 透明度：0-1之间 */
}
/* 主窗体伪元素各自样式 可重新定义高宽、动画数据等 */
.kBox::before {
        animation: ro 4s ease-in-out infinite; /* alternate; */
}
.kBox::after {
        transform: rotate(90deg);
        animation: ro 2s linear infinite;
}
/* 旋转动画 可加入更丰富的变化*/
@keyframes ro {
        100% { transform: rotate(360deg); }
}

</style>

<div class="kBox"></div>

红影 发表于 2022-1-26 10:56

上次讲的十字这里可以派用途了。哦，沙发是不是应该给你留着发效果啊。一个不小心被我抢了{:4_173:}

马黑黑 发表于 2022-1-26 11:02

本帖最后由 马黑黑 于 2022-1-26 11:04 编辑

效果在二楼。

可以通过修改一些细节达成自己需要的效果，比如：

其中一个伪元素播放动画 animation: ro 4s ease-in-out infinite; 可以加一个 alternate 参数 animation: ro 4s ease-in-out infinite alternate; ，这样它转完一圈会倒着再转一圈，与另一个变化形成交错效果。

再比如，可以利用伪元素的全透明背景（background: transparent;）然后设置一条边框（如 border-top）为白色、1px、dashed样式，就会出现光线断续的效果。我的示例是实体光柱，用的是伪元素自身的背景色做的（加入了opacity处理）。

总之，这是一个基本的光柱旋转形态，可以进多步完善和丰富。

马黑黑 发表于 2022-1-26 11:05

红影 发表于 2022-1-26 10:56
上次讲的十字这里可以派用途了。哦，沙发是不是应该给你留着发效果啊。一个不小心被我抢了

是的吧？当时还问画十字有啥用，这回不就用上了？

效果我已经发在二楼

红影 发表于 2022-1-26 15:35

马黑黑 发表于 2022-1-26 11:05
是的吧？当时还问画十字有啥用，这回不就用上了？

效果我已经发在二楼

原来我没影响到效果展示呢。{:4_173:}
是的，这么快就用上它了，黑黑厉害。

红影 发表于 2022-1-26 15:35

可以利用伪元素的全透明背景（background: transparent;）然后设置一条边框（如 border-top）为白色、1px、dashed样式，就会出现光线断续的效果。
还可以有断续效果？肯定更好看{:4_187:}

红影 发表于 2022-1-26 15:36

我也学做了个光柱旋转的送你，不过还有点小问题{:4_173:}

马黑黑 发表于 2022-1-26 16:05

红影 发表于 2022-1-26 15:35
原来我没影响到效果展示呢。
是的，这么快就用上它了，黑黑厉害。

这些都是基本功啊，前面说过的

马黑黑 发表于 2022-1-26 16:07

红影 发表于 2022-1-26 15:35
可以利用伪元素的全透明背景（background: transparent;）然后设置一条边框（如 border-top）为白色、1px、 ...
试过才知道

红影 发表于 2022-1-26 20:33

马黑黑 发表于 2022-1-26 16:05
这些都是基本功啊，前面说过的

我学的一直都不扎实{:4_173:}

红影 发表于 2022-1-26 20:36

马黑黑 发表于 2022-1-26 11:02
效果在二楼。

可以通过修改一些细节达成自己需要的效果，比如：


如果密集点，会不会像闪光。

马黑黑 发表于 2022-1-26 21:01

红影 发表于 2022-1-26 20:36
如果密集点，会不会像闪光。

也不一定，要看做出来的效果，我没做过

马黑黑 发表于 2022-1-26 21:01

红影 发表于 2022-1-26 20:33
我学的一直都不扎实

这个要改变一下

红影 发表于 2022-1-26 21:37

马黑黑 发表于 2022-1-26 21:01
也不一定，要看做出来的效果，我没做过

这个很好玩，有无限可能{:4_173:}

红影 发表于 2022-1-26 21:38

马黑黑 发表于 2022-1-26 21:01
这个要改变一下

黑黑说得对，我发现前面还有很多功能我都需要去复习一下了{:4_173:}

马黑黑 发表于 2022-1-26 21:51

红影 发表于 2022-1-26 21:38
黑黑说得对，我发现前面还有很多功能我都需要去复习一下了

巩固一下也好

马黑黑 发表于 2022-1-26 21:51

红影 发表于 2022-1-26 21:37
这个很好玩，有无限可能

应该有

红影 发表于 2022-1-27 10:46

马黑黑 发表于 2022-1-26 21:51
巩固一下也好

记得生日那几天光忙着回帖了，发现好多完全没细看的都是那段时间里的。

红影 发表于 2022-1-27 10:46

马黑黑 发表于 2022-1-26 21:51
应该有

有时间玩玩这些真的太有趣了{:4_199:}

查看完整版本: 假戏真做：仅一个div模拟光影效果