css动画 点击颜色变化再变回原色
时间: 2023-12-06 07:34:37 浏览: 21
要实现点击元素时颜色变化再变回原色的 CSS 动画,你可以使用 CSS 的 `@keyframes` 规则和 `animation` 属性。以下是一个示例:
HTML:
```html
<div id="myElement">点击我</div>
```
CSS:
```css
@keyframes colorChange {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: red;
}
}
#myElement {
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
animation: colorChange 2s infinite;
}
#myElement:hover {
animation-play-state: paused;
}
```
在上面的示例中,我们定义了一个名为 `colorChange` 的 `@keyframes` 规则,它定义了颜色从红色到蓝色再回到红色的过渡。然后,我们将该动画应用到 `myElement` 元素上,并设置了动画的持续时间为 2 秒,并且无限循环播放。当鼠标悬停在元素上时,我们通过设置 `animation-play-state: paused;` 来暂停动画。
当你点击 `myElement` 元素时,它会播放动画,颜色会在红色和蓝色之间变化,然后再回到红色。