[英]Rotate icon with css on mouse hover
簽出后我實現了下面的代碼,但效果沒有發生,不知道它缺乏的地方..
<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
<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>
編輯:將旋轉CLASS從圖標更改為父級
它將適用於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:
.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.