html – Button内部图像的动画

概述我是这个编码领域的新手,我认为我的问题很简单,对于像你们这些人一样有经验的人.我正在尝试为按钮内部的图像设置动画.当我点击按钮时,我需要将图像旋转360度.我不知道我在做什么错误是我的 HTML和CSS代码.请帮忙 .syncRotate { -webkit-transition: 500ms ease all !important; -moz-transition: 500ms ease 我是这个编码领域的新手,我认为我的问题很简单,对于像你们这些人一样有经验的人.我正在尝试为按钮内部的图像设置动画.当我点击按钮时,我需要将图像旋转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  mdtooltipposition="above" mdtooltip="Sync User" (click)="sync()">    <img   src="../../assets/images/icons/sync.svg" alt="Sync"></button>

解决方法 如果您只想使用转换,这将对您有用.

.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  mdtooltipposition="above" mdtooltip="Sync User" (click)="sync()">    <img   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  mdtooltipposition="above" mdtooltip="Sync User" (click)="sync()">    <img   src="https://lh6.ggpht.com/bE_u2kFoX28G428YH1jpWTMoaZ3B9cokstrKxD82zj7hoBNL-U1wiAVddau3mvvUpPoD=w300" alt="Sync"></button>

通过将500毫秒更改为400毫秒左右,我们可以将其设置为快速并且将其更高更高将使动画和转换更慢,例如900毫秒或1秒.

注意：因为我们只使用CSS,所以动画和转换仅在用户单击按钮时持续.在你的情况下,两者都是相同的.

总结

以上是内存溢出为你收集整理的html – Button内部图像的动画全部内容，希望文章能够帮你解决html – Button内部图像的动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。