如何使用HTML 5创建发光效果

Question

如何使用HTML 5创建发光效果

5

寻求帮助实现在Stacks新文档网站上看到的那个小蓝点，它非常适合用于我正在构建的显示服务健康/指标的仪表板的动画效果。我使用Chrome的检查器获取了HTML/CSS，但我对这些东西一窍不通，我甚至无法得到一个点，更别说发光的蓝点了 ;-D https://jsfiddle.net/raffinyc/3trup2c1/

.help-bubble:after {
  content: "";
  background-color: #3af;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  display: block;
  top: 1px;
  left: 1px;
}
<span class="help-bubble-outer-dot">
        <span class="help-bubble-inner-dot"></span>
</span>

- raffian

1

你可以查看这个链接：https://codepen.io/nickpettit/pen/vacDI - sguan

太完美了，正是我想要的，谢谢。 - raffian

如果你需要更多帮助，这里有另一个例子：http://jsfiddle.net/dH6LS/1667/。我可以为你提供帮助。 - Cem Arguvanlı

2个回答

0

尝试使用box-shadow：

-webkit-box-shadow: 0px 0px 20px 0px rgba(0,225,255,1);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,225,255,1);
box-shadow: 0px 0px 20px 0px rgba(0,225,255,1);

语法如下：

0px (horizontal offset) 0px (vertical offset) 20px (bur value) 0px (spread value) rgba (color value)

更多信息请参见此处：

https://css-tricks.com/snippets/css/css-box-shadow/

- Toby

还不够，似乎只有阴影效果，我正在寻找发光效果，请参考这个链接：http://stackoverflow.com/documentation - raffian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jack Guy · Accepted Answer

这里是完整的复现链接。动画中广泛使用了伪元素。CSS如下：

.help-bubble .help-bubble-outer-dot {
    margin: 1px;
    display: block;
    text-align: center;
    opacity: 1;
    background-color: rgba(0,149,255,0.4);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: help-bubble-pulse 1.5s linear infinite;
}

.help-bubble {
  display: block;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  left: 40px;
  top: 40px;
}

.help-bubble::after {
    content: "";
    background-color: #3af;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 1px;
    left: 1px;
}

.help-bubble .help-bubble-inner-dot {
    background-position: absolute;
    display: block;
    text-align: center;
    opacity: 1;
    background-color: rgba(0,149,255,0.4);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    -webkit-animation: help-bubble-pulse 1.5s linear infinite;
    -moz-animation: help-bubble-pulse 1.5s linear infinite;
    -o-animation: help-bubble-pulse 1.5s linear infinite;
    animation: help-bubble-pulse 1.5s linear infinite;
}

.help-bubble .help-bubble-inner-dot:after {
    content: "";
    background-position: absolute;
    display: block;
    text-align: center;
    opacity: 1;
    background-color: rgba(0,149,255,0.4);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    -webkit-animation: help-bubble-pulse 1.5s linear infinite;
    -moz-animation: help-bubble-pulse 1.5s linear infinite;
    -o-animation: help-bubble-pulse 1.5s linear infinite;
    animation: help-bubble-pulse 1.5s linear infinite;
}

@keyframes help-bubble-pulse{
  0% {
    transform: scale(1);
    opacity: .75;
  }
  25% {
    transform:scale(1);
    opacity:.75;
  }
  100% {
    transform:scale(2.5);
    opacity:0
  }
}

就记录而言，我对代码知识产权并不是很熟悉，但如果没有某种方式使其成为您自己的内容，您可能无权使用它。