css动画盒子代码 |好看的css导航

下面是一个简单的CSS动画盒子示例代码：

.box {
width: 50px;
height: 50px;
background-color: red;
position: relative;
animation: move 2s infinite;
}
@keyframes move {
0% {
left: 0;
}
50% {
left: 100px;
}
100% {
left: 0;
}
}

这段代码中，大家首先定义了一个class为“box”的盒子元素，设置宽度、高度、背景颜色和相对定位，然后通过“animation”属性设置了一个名为“move”的动画效果，该动画效果在2秒钟内无限循环播放。

接下来，大家又定义了一个名为“move”的关键帧动画，其中0%表示动画开始的时候，50%表示动画进行到一半的时候，100%表示动画结束的时候。大家分别设置了每个关键帧的“left”属性，使得该盒子元素在水平方向上来回移动。

通过这段代码，大家可以看到CSS动画盒子的强大之处，它可以让大家轻松创建各种各样的动画效果，如旋转、缩放、向上滑动、淡入淡出等等。只需要通过设置不同的动画关键帧，就可以轻松地实现各种华丽的动画效果。