我目前正在尝试在网页上重现蜡烛效果。 结果如下:https://jsfiddle.net/Zenoo0/z9nejmn3/
HTML
<div id="light"></div>
CSS
#light {
top: 50%;
left: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
position: absolute;
background-color: rgba(255, 165, 0, 0.5);
-webkit-box-shadow: 0 0 52px 52px rgba(255, 165, 0, 0.5);
-moz-box-shadow: 0 0 52px 52px rgba(255, 165, 0, 0.5);
box-shadow: 0 0 52px 52px rgba(255, 165, 0, 0.5);
animation-name: lightFlicker;
animation-duration:3ms;
animation-delay:200ms;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-direction: alternate;
z-index: 10;
}
如您所见,我的背景光仍然有一点边框,尽管我之前将其设置为无。 我似乎不知道如何删除它。
谢谢。
最佳答案
添加到#light
css 过滤器:blur(4px);
关于CSS Div 边框即使隐藏也会显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42418704/