css怎么制作点击旋转动画

.refresh-btn: active {
    animation: 0.6s rotatefresh 1;
}

@keyframes rotatefresh {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
        transition-duration: 0.6s;
        transition: 0.6s;
    }
}

怎样每次点击都能执行一次旋转动画?
现在是每次点击的时候,需要一直按着鼠标左键才能执行，能不能单击一次就执行一次这个动画？

阅读 21.8k

建议js控制一下，如果你不想用js，非要用css写也可以的

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        input{
            border: 1px solid #dedede;
            background: #fff;
            padding: 5px;
        }
        input:focus{
            outline: none;
            animation: rotatefresh 1s;
        }
        input:active{
            /* 加上这个才可以连续点击 */
            animation: none;  
            background: '#eee';
        }
        @keyframes rotatefresh {
            from { transform: rotate(0deg) }
            to {
                transform: rotate(360deg);
                transition: all 0.6s;
            }
        }
    </style>
</head>
<body>
    <input type="button" value="点击旋转">
</body>
</html>

但是这样有一个限制，必须用input元素，因为input元素的:focus才有效

图片描述

就是用input的:focus添加一个动画的状态，然后在:active的时候重置一下动画，实现连续点击。

css怎么制作点击旋转动画

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

element-plus的el-menu怎么修改el-sub-menu的template的B的颜色？

怎么用css 实现这个形状？

使用transform: scaleX 会造成几个相连的子元素看起来是分隔的？

在一个前端和position:absolute; position: relative;中的其他标签内容为什么出现异常？

less中在calc使用变量报错是哪里需要配置还是写法不对？