css怎么做圆点发光效果 |css 背景定位源代码

今天大家来学习如何使用CSS制作圆点发光效果。这种效果通常用于网页设计中的提示和焦点指示。 首先，大家需要使用CSS的伪类::before和::after来创建大家的圆点和光晕。大家将使用position和border-radius属性将其转换为大家所需的形状。 接下来，大家将使用box-shadow属性来添加光晕效果。可以使用多个box-shadow属性值来添加多个光晕层。 最后，大家将使用animation属性来为大家的光晕层添加一个闪烁的动画。 现在，大家来看一下完整的CSS代码：

p {
position: relative;
list-style: none;
}
p::before, p::after {
content: "";
display: block;
position: absolute;
border-radius: 50%;
opacity: 0;
}
p::before {
width: 8px;
height: 8px;
top: 50%;
left: 0;
transform: translateY(-50%);
}
p::after {
width: 50px;
height: 50px;
top: calc(50% - 25px);
left: -21px;
box-shadow: 0 0 10px 2px #fff;
}
p:hover::before, p:hover::after {
opacity: 1;
}
p::after {
animation: pulse 1s ease-out infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
}

在这个代码中，大家使用了一个:hover伪类来为大家的元素添加鼠标悬停效果。大家还使用了一个@keyframes规则来为大家的光晕层添加一个闪烁的动画。您可以通过调整动画中的参数来改变光晕层的动画效果。 现在，您可以将这段代码应用于您的网页中，以获得眼-catching的光晕效果。通过借助CSS，您可以让您的网页更具有吸引力和视觉吸引力。