css3动画一道光划过 |用css写网站访问统计代码

/* 定义画布 */
.container {
width: 150px;
height: 150px;
background-color: #000;
position: relative;
}
/* 定义光标 */
.cursor {
width: 2px;
height: 100%;
background-color: white;
position: absolute;
top: 0;
left: -2px;
animation: cursorMove 2s linear infinite;
}
/* 定义动画 */
@keyframes cursorMove {
0% {
left: -2px;
}
50% {
left: calc(100% + 2px);
}
100% {
left: -2px;
}
}

首先，大家需要准备一个画布.container，这里偶设置了它的宽高为 150px，并且背景色为黑色。接着在画布内部放置一个竖直方向长度为 100% 的光标.cursor，并将其background-color设置为白色。

然后定义动画@keyframes cursorMove，让光标沿着画布从左到右走过一次，然后不断重复这个往返运动。在动画中，大家可以设定关键帧，即光标最初的位置、在画布中间时的位置和返回到最初位置时的位置，以实现光标来回滑动的效果。

最后在光标样式中添加动画属性animation: cursorMove 2s linear infinite;，让画面上的光标开始动起来。这里的参数含义分别为使用大家定义的动画、动画时间为 2s、动画速度为线性（匀速）并且无限循环播放。

现在，大家成功实现了一道光划过的 CSS3 动画，让网页变得更加生动有趣吧！