寻求帮助来实现 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>
最佳答案
Here's the full reproduction .动画充分利用了伪元素。 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
}
}
郑重声明,我不太精通代码知识产权,但如果不以某种方式将其变成您自己的,您不太可能有权使用它。
关于javascript - 如何使用 HTML 5 创建发光效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38537415/