当我们在进行在线答题时，有时候会遇到答错题目的情况。这时候，页面通常会给出相应的提示，以便我们能够及时纠正自己的错误。在这种情况下，我们可以使用CSS来实现一种简单但有效的答题出错页面红框震动效果。

.wrong-answer{
    border: 5px solid red; /*红色边框*/
    animation: shake 0.5s; /*应用震动动画*/
    animation-iteration-count: infinite; /*无限重复动画*/
}

@keyframes shake{
    0%{transform:translateX(0);} /*震动初始状态*/
    25%{transform:translateX(-5px) rotate(5deg);} /*向左倾斜*/
    50%{transform:translateX(5px) rotate(-5deg);} /*向右倾斜*/
    75%{transform:translateX(-5px) rotate(5deg);} /*向左倾斜*/
    100%{transform:translateX(0); } /*震动结束状态*/
}

以上是CSS的代码部分。通过给答题出错容器添加一个“wrong-answer”的类名，就可以实现震动效果了。动画效果由5个关键帧组成，分别表示元素向左倾斜、向右倾斜以及结束状态。每个关键帧都包括位置和旋转方向信息，利用transform属性完成。

这种红框震动效果可以在各种在线答题或考试场景中使用，可以帮助用户更容易接收提示信息，提高应对错误的效率。同时，CSS实现的动画效果性能优良，不会影响页面响应速度和用户体验，值得借鉴。