CSS3依次点亮是一种通过使用CSS3技术来实现的点亮动画效果，通常被用于页面加载或导航栏等场景中。下面，我将向大家介绍如何实现这一效果。

/* 元素默认样式 */
.box {
width: 60px;
height: 60px;
background-color: #ddd;
margin: 10px;
}
/* 为依次点亮效果定义伪类 */
.box:first-child {
animation-delay: 0.2s;
}
.box:nth-child(2) {
animation-delay: 0.4s;
}
.box:nth-child(3) {
animation-delay: 0.6s;
}
.box:nth-child(4) {
animation-delay: 0.8s;
}
.box:last-child {
animation-delay: 1s;
}
/* 定义动画效果 */
@keyframes box-animate{
0% {
background-color: #ddd;
}
100% {
background-color: #f00;
}
}
/* 应用动画效果 */
.box {
animation-name: box-animate;
animation-duration: 1s;
animation-fill-mode: forwards; /*动画结束后保持最后状态*/
}

上述代码中，我们先定义了一个默认样式的盒子，并为即将要实现依次点亮的盒子们定义了相应的伪类。然后，通过定义动画效果的关键帧，实现了盒子变色的动画效果。最后在应用动画时，设置命名以及一些参数，完成整个CSS3依次点亮的效果。

相信通过这篇文章的介绍，大家已经掌握了CSS3依次点亮的实现方法。如果你也有更多CSS3的问题，欢迎在评论区提出，我会尽力回答。