木屋窗口光晕的CSS动画

我正在做一个圣诞主题的网站，我想做一个木屋风格的村庄。其主要特点是从机舱窗户可以看到灯光

我想问一下，是否有人有使用CSS制作逼真发光效果的经验

我目前的例子只是淡入淡出一个橙色方块，但我认为这可以让它看起来更大气，我相信有一个很酷的技巧可以让人分享漂亮的辉光效果

示例：

灯光示例：

---

在这里发布我们讨论的总结作为答案，因为我认为这实现了您想要的一切

设置

框阴影的动画

从窗口创建初始闪烁辉光。为了绘制从窗户投射到雪地上的光线，实际上需要两个三角形，一个从窗户底部边缘延伸，另一个从右边缘延伸，连接在一起以创建一个形状

您可以使用零宽度/高度div创建这些三角形，并在两侧为其指定一个边界（这在其他地方有很好的文档记录，可以对其进行搜索，也可以使用类似生成器的工具）

---

CodePen：（我已经为您完成了前两个三角形光线，留下了第二个窗口作为练习，以便您可以自己理解该技术。我还使用了

：：before

和

：：before

伪元素作为三角形，以保持DOM较小，尽管您同样可以使用

div

s）

在这里发布我们讨论的总结作为答案，因为我认为这实现了您想要的一切

设置

框阴影的动画

从窗口创建初始闪烁辉光。为了绘制从窗户投射到雪地上的光线，实际上需要两个三角形，一个从窗户底部边缘延伸，另一个从右边缘延伸，连接在一起以创建一个形状

您可以使用零宽度/高度div创建这些三角形，并在两侧为其指定一个边界（这在其他地方有很好的文档记录，可以对其进行搜索，也可以使用类似生成器的工具）

---

CodePen：（我已经为您完成了前两个三角形光线，留下了第二个窗口作为练习，以便您可以自己理解该技术。我还使用了

：：before

和

：：before

伪元素作为三角形，以保持DOM较小，尽管您同样可以使用

div

s）

您是否尝试过使用

框阴影

属性？根据您的目标浏览器，您也可以使用css动画淡入/淡出（我无法在我的公司网络上加载您的测试站点，以查看您到目前为止是如何完成的，也许JSFIDLE会更好）添加了

box shadow

用法示例，略微圆化边缘，以获得更柔和的外观，并提高动画速度，同时减少状态差异，以提供更多“内部火焰闪烁”的感觉。希望这能让你走上正确的道路。我喜欢这一点，肯定会给人一种闪烁的感觉，我正在考虑使用一个非常透明的三角形形状，它可以在外面撞到雪，这可能是我能找到的最好的例子。你试过使用

箱影

属性吗？根据您的目标浏览器，您也可以使用css动画淡入/淡出（我无法在我的公司网络上加载您的测试站点，以查看您到目前为止是如何完成的，也许JSFIDLE会更好）添加了

box shadow

用法示例，略微圆化边缘，以获得更柔和的外观，并提高动画速度，同时减少状态差异，以提供更多“内部火焰闪烁”的感觉。希望这能让你走上正确的道路。我喜欢这一点，肯定会给人一种闪烁的感觉，我正在考虑使用一个非常透明的三角形形状，它可以在外面碰到雪，这可能是我能找到的最好的例子。如果三角形发光的z指数不比船舱高的话？谢谢你的帮助，不用客气。子元素z索引是相对于其父元素计算的。换句话说，您不需要设置它们的高度，因为它们已经在机舱上方。（刚刚注意到有一个BG图像。它没有显示给我，因为它在你的域中，我公司的防火墙阻止了它）。因此，是的，z-索引需要设置为高于

#cab

div的z-索引，但是您需要该div上的z-索引吗？刚刚访问了您的站点，我现在明白您的意思了。在这种情况下，三角形需要是单独的元素。目前，由于它们是窗口方格的子元素，需要位于驾驶室的后面，因此不能将它们带到驾驶室的前面，无论您按我的方式将z索引设置得多高（因为它们仅限于其父堆叠上下文）：隐藏在驾驶室png（透明窗）下的主灯光发光（灯光溢出）应该是从窗户“出来”的，目前由于继承的z指数，辉光也位于座舱下方。这是我试图重新创建的。三角形辉光的z指数是否不高于座舱？谢谢你的帮助，不用客气。子元素z索引是相对于其父元素计算的。换句话说，您不需要设置它们的高度，因为它们已经在机舱上方。（刚刚注意到有一个BG图像。它没有显示给我，因为它在你的域中，我公司的防火墙阻止了它）。因此，是的，z-索引需要设置为高于

#cab

div的z-索引，但是您需要该div上的z-索引吗？刚刚访问了您的站点，我现在明白您的意思了。在这种情况下，三角形需要是单独的元素。目前，由于它们是窗方格的子元素，需要位于驾驶室的后面，因此无论我如何看待z索引（因为它们仅限于其父堆叠上下文），它们都不能被带到驾驶室的前面：

.animated {
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}

@-webkit-keyframes flash {
    0%, 50%, 100% {opacity: .80;}
    25%, 75% {opacity: 0.25;}
}
@keyframes flash {
    0%, 50%, 100% {opacity: .80;}
    25%, 75% {opacity: 0.25;}
}
.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}