Question

所以当你将鼠标悬停在容器上时，我已经完成了一些简单的代码来旋转内部元素。

当鼠标悬停在容器上但当鼠标不再在容器内时，旋转停止时，这就像我想要的那样。

如何完成完全旋转旋转，由鼠标悬停启动，即使鼠标离开容器也会完成旋转，最好只使用CSS。

当前代码：

HTML

@keyframes spin {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-90deg); }
  50%{ transform: rotate(-180deg); }
  75% { transform: rotate(-270deg); }
  100% { transform: rotate(-360deg); }
}

.logo:hover > .spin{ 
  animation: spin 450ms;
}

.logo{
  background: #eee;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 110px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#">
  <div class="logo">
    <i class="fa fa-globe fa-2x spin" aria-hidden="true"></i>
  </div>
</a>

Answer 1

这应该有效！：）

jQuery(document).ready(function(){
jQuery(".logo").hover(function(){
   var logo = jQuery(this);
  if(!logo.hasClass('hover')){
     logo.addClass('hover');
     setTimeout(function(){
        logo.removeClass('hover');
     }, 450);
  }
}, function(){});
});

@keyframes spin {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-90deg); }
  50%{ transform: rotate(-180deg); }
  75% { transform: rotate(-270deg); }
  100% { transform: rotate(-360deg); }
}

.logo.hover > .spin{ 
  animation: spin 450ms;
}

.logo{
  background: #eee;
  width: 100px;
  height: 100px;
  text-align: center;
  li

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#">
  <div class="logo">
    <i class="fa fa-globe fa-2x spin" aria-hidden="true"></i>
  </div>
</a>

在悬停时启动旋转动画，但在悬停时仍然完成

1 个答案: