css动画效果 点击按钮 |css 单选框实例

要在CSS中添加动画效果，需要使用关键帧（@keyframes）规则。关键帧规则允许您在时间轴上定义不同的动画状态，然后告诉浏览器如何在它们之间变换。以下是一个例子：

@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-10px); }
50% { transform: translateX(0); }
75% { transform: translateX(10px); }
100% { transform: translateX(0); }
}

这个关键帧规则定义了一种“摇晃”效果 – 即当元素达到动画的75%时，它将沿着x轴向左移动10像素，然后回到原始位置，并继续向右移10像素，直到达到100%。要将此效果应用于按钮元素，您可以使用CSS的“animation”和“animation-name”属性：

button {
animation: shake 0.5s;
animation-iteration-count: 3;
}

此CSS代码将为按钮元素应用“shake”动画，每次使用0.5秒的持续时间。动画将重复3次。

这只是一个例子，您可以使用不同的关键帧规则创建许多不同的效果。希望这些提示能够帮助您使您的网站更有趣和有吸引力。