[英]Rotate icon with css on mouse hover
After checking out I implemented below code but the effect is not happening, don't know where its lacking.. 签出后我实现了下面的代码,但效果没有发生,不知道它缺乏的地方..
<style>
.rotate {
-webkit-transition: -webkit-transform 0.4s ease-in-out;
-moz-transition: -moz-transform 0.4s ease-in-out;
-o-transition: -o-transform 0.4s ease-in-out;
-ms-transition: -ms-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
cursor:pointer;
}
.rotate:hover {
color:#afafaf;
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
</style>
HTML HTML
<div class="col-lg-6 col-md-6 col-sm-12">
<h2 align="center"><a href="abc.php" class="rotate"> <icon class="icon icon-rocket icon-2x "> </icon> </a> <br />
Build your Resume </h2>
</div>
Edit: changed the rotate CLASS from icon to parent 编辑:将旋转CLASS从图标更改为父级
It will work with animation
: 它将适用于
animation
:
<div class="col-lg-6 col-md-6 col-sm-12">
<h2 align="center"><a href="abc.php" class="rotate"> <icon class="icon icon-rocket icon-2x "> </icon> </a> <br />
Build your Resume </h2>
</div>
CSS: CSS:
.rotate {
cursor:pointer;
}
.rotate:hover {
color:#afafaf;
-moz-animation: spin .4s 1 linear;
-o-animation: spin .4s 1 linear;
-webkit-animation: spin .4s 1 linear;
animation: spin .4s 1 linear;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.