Question

这很简单，但不起作用。

HTML：

 <div id="add_content">Rotate Before at hover</div>

CSS：

#add_content {
    margin: 30px;
}
#add_content:before {
    background-color: red;
    content: 'a';
    padding: 5px 10px;
    margin-right: 10px; 
    display: inline-block;
}
#add_content:before:hover  {
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
}

http://fiddle.jshell.net/nu6EA/5/

不要轮换工作

Answer 1

:hover必须在:before之前。试试这个 CSS ：

#add_content {
    margin: 30px;

}
#add_content:before {
    transition: all .2s ease-in;
    background-color: red;
    content: 'a';
    padding: 5px 10px;
    margin-right: 10px; 
    display: inline-block;
}
#add_content:hover:before  {
    transform: rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
}

更新小提琴：http://fiddle.jshell.net/nu6EA/6/

Answer 2

更改:before中的div:hover伪元素：

＆＃13;

#add_content {
  margin: 30px;
}
#add_content:before {
  background-color: red;
  content: 'a';
  padding: 5px 10px;
  margin-right: 10px;
  display: inline-block;
}
#add_content:hover:before {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
}

＆＃13;

<div id="add_content">Rotate Before at hover</div>

＆＃13;

Answer 3

我想你想在悬停时设置旋转动画...试试这段代码：http://fiddle.jshell.net/nu6EA/9/

#add_content {
    margin: 30px;
}
#add_content::before {
    background-color: red;
    content: 'a';
    padding: 5px 10px;
    margin-right: 10px; 
    display: inline-block;
}
#add_content:hover:before  {
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 1s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    100% {-webkit-transform: rotate(360deg);}
}

/* Standard syntax */
@keyframes mymove {
    100% {transform: rotate(360deg);}
}

CSS转换旋转不起作用

3 个答案: