html 点击翻转效果,css怎么制作点击旋转动画

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

Title

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;

}

}

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

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