css好玩的动画特效模式 |css显示当前位置

/*移动文字*/
.move-text{
animation: move-text 5s linear infinite;
}
@keyframes move-text {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
/*闪烁*/
.blink{
animation: blink 0.5s linear infinite;
}
@keyframes blink{
0%{
opacity: 0;
}
50%{
opacity: 1;
}
100%{
opacity: 0;
}
}
/*旋转*/
.rotate{
animation: rotate 2s linear infinite;
}
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
/*跳动*/
.bounce{
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce{
0%, 25%, 75%, 100%{
transform: translateY(0);
}
50%{
transform: translateY(-20px);
}
}
/*放大缩小*/
.zoom{
animation: zoom 1s linear infinite;
}
@keyframes zoom{
0%, 100%{
transform: scale(1);
}
50%{
transform: scale(2);
}
}

以上是一些简单但有趣的CSS动画特效，通过一些简单的CSS属性就可以实现。如果想要更多复杂的特效，可以尝试使用CSS插件或JavaScript库。