寻找帮助实现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>
答案 0 :(得分:8)
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
}
}
为了记录,我对代码知识产权并不十分熟悉,但如果不以某种方式使其成为您自己的话,您不可能完全使用它。
答案 1 :(得分: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)
有关详细信息,请参阅此处: