html – 鼠标悬停时用css旋转图标

概述签出后我实现了下面的代码,但效果没有发生,不知道它缺乏的地方.. <style> .rotate { -webkit-transition: -webkit-transform 0.4s ease-in-out; -moz-transition: -moz-transform 0.4s ease-in-ou 签出后我实现了下面的代码,但效果没有发生,不知道它缺乏的地方..

<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 >                <h2 align="center"><a href="abc.PHP" > <icon > </icon> </a> <br />                Build your Resume </h2>            </div>

编辑：将旋转CLASS从图标更改为父级

解决方法 它将适用于动画：

<div >    <h2 align="center"><a href="abc.PHP" > <icon > </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); }}

总结

以上是内存溢出为你收集整理的html – 鼠标悬停时用css旋转图标全部内容，希望文章能够帮你解决html – 鼠标悬停时用css旋转图标所遇到的程序开发问题。

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