运行效果
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body{background-color: #cbcbcb;}.main{height: 200px;width: 180px;display: grid;grid-template-columns: repeat(6,16.666%);grid-template-rows: repeat(1,100%);text-align: center;position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);}.main span{position: absolute;font-size: 25px;}.main .main-circle-1{color:#00FFFF;left: 0;animation: move 1s ease-in-out infinite;animation-delay:0s;}.main .main-circle-2{color:#FF8C00;left: 16.6%;animation: move 1s ease-in-out infinite;animation-delay:0.1s;}.main .main-circle-3{color:#FFD700;left: 33.3%;animation: move 1s ease-in-out infinite;animation-delay:0.2s;}.main .main-circle-4{color:#EE82EE;left: 50%;animation: move 1s ease-in-out infinite;animation-delay:0.3s;}.main .main-circle-5{color:#FF6347;left: 66.6%;animation: move 1s ease-in-out infinite;animation-delay:0.4s;}.main .main-circle-6{color:#40E0D0;left: 83.3%;animation: move 1s ease-in-out infinite;animation-delay:0.5s;}/*.main .main-circle-1{animation: move 1s ease-in-out infinite;}*/@keyframes move {0%{top: 80%}100%{top: 0}}</style></head><body><div class="main"><span class="main-circle-1">●</span><span class="main-circle-2">●</span><span class="main-circle-3">●</span><span class="main-circle-4">●</span><span class="main-circle-5">●</span><span class="main-circle-6">●</span></div></body></html>
![[css] 使用css实现蒙版的效果](https://700zi.400zi.cn/uploadfile/img/14/889/f16af7c6ed3018c1ffa2686b3e7753ef.jpg)
