当一颗星星被点击时,关闭其他星星的闪烁颜色/动画可以通过以下步骤实现:
以下是一个示例代码片段,演示如何使用JavaScript和CSS来实现关闭其他星星的闪烁颜色/动画:
HTML:
<div class="star" id="star1"></div>
<div class="star" id="star2"></div>
<div class="star" id="star3"></div>
<div class="star" id="star4"></div>
<div class="star" id="star5"></div>
CSS:
.star {
width: 50px;
height: 50px;
background-color: yellow;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.star.clicked {
animation: none;
background-color: red;
}
JavaScript:
const stars = document.querySelectorAll('.star');
stars.forEach(star => {
star.addEventListener('click', () => {
stars.forEach(s => {
if (s.id === star.id) {
s.classList.add('clicked');
} else {
s.classList.remove('clicked');
}
});
});
});
在上述示例中,点击星星时,被点击的星星将添加名为"clicked"的CSS类,从而关闭其闪烁动画并改变背景颜色。其他星星将移除该类,以恢复闪烁动画效果。
请注意,这只是一个简单的示例,实际实现可能会根据具体的应用场景和需求有所不同。
领取专属 10元无门槛券
手把手带您无忧上云