我是这个编码领域的新手,我认为我的问题对于像你们这样有经验的人来说很简单。我正在尝试为按钮内的图像制作动画。当我点击按钮时,我需要图像旋转 360 度。我不知道我在这里做错了什么是我的 HTML 和 CSS 代码。请帮忙
.syncRotate {
-webkit-transition: 500ms ease all !important;
-moz-transition: 500ms ease all !important;
-o-transition: 500ms ease all !important;
transition: 500ms ease all !important;
-webkit-transform: rotate(360deg) !important;
}
<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
<img class="syncRotate" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="../../assets/images/icons/sync.svg" alt="Sync">
</button>
最佳答案
如果您只想使用 transition.!
,这对您有用.syncRotate {
-webkit-transition: 500ms ease all;
-moz-transition: 500ms ease all;
-o-transition: 500ms ease all;
transition: 500ms ease all;
-webkit-transform: rotate(0deg);
}
.syncRotate:active {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
<img class="syncRotate" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="https://lh6.ggpht.com/bE_u2kFoX28G428YH1jpWTMoaZ3B9cokstrKxD82zj7hoBNL-U1wiAVddau3mvvUpPoD=w300" alt="Sync">
</button>
如果你想让它使用 CSS 动画 制作漂亮的动画
@keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
.syncRotate {
-webkit-transform: rotate(0deg);
}
.syncRotate:active {
animation: rotation 500ms ease-in-out forwards;
}
<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
<img class="syncRotate" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="https://lh6.ggpht.com/bE_u2kFoX28G428YH1jpWTMoaZ3B9cokstrKxD82zj7hoBNL-U1wiAVddau3mvvUpPoD=w300" alt="Sync">
</button>
通过将 500 毫秒更改为 400 毫秒左右,我们可以使其变快,将其更改得更高将使动画和过渡变慢,例如 900 毫秒或 1 秒。
注意:因为我们仅使用 CSS,所以动画和过渡仅在用户单击按钮时持续。所以在你的情况下两者都是一样的。
关于html - 按钮内图像的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45616822/