Question

首先，如果有人有任何更好的解决方案并且可以省去我的麻烦，我将不胜感激。

基本上我试图制作一个圆形/椭圆形旋转木马（垂直）。我还没有看到类似的东西，我已经谷歌搜索好几天了。它不存在，这很奇怪。

我试图让元素在一个圆圈中旋转，并且在悬停在任何元素上时，所有元素的旋转都将停止，而悬停的元素将会做一些像变大的动画。

See this JSFiddle: https://jsfiddle.net/23x7t4dq/

我尝试了暂停转换或转换的组合但没有效果。

＆＃13;

.circle-container {
    margin: 0 auto;
    position: relative;
    width: 440px;
    height: 440px;
    background: transparent;
    -webkit-animation: rotation 6s linear 0s infinite normal none;
    -moz-animation: rotation 6s linear 0s infinite normal none;
    -ms-animation: rotation 6s linear 0s infinite normal none;
    -o-animation: rotation 6s linear 0s infinite normal none;
    animation: rotation 6s linear 0s infinite normal none;
}
.circle {
    position: absolute;
    top: 170px;
    left: 170px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.7;
}
.circle-container:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}
.circle:nth-child(1) {
    -webkit-transform: rotate(0deg) translateX(150px);
    -moz-transform: rotate(0deg) translateX(150px);
    -ms-transform: rotate(0deg) translateX(150px);
    -o-transform: rotate(0deg) translateX(150px);
    transform: rotate(0deg) translateX(150px);
    background: #ff504f;
}
.circle:nth-child(2) {
    -webkit-transform: rotate(72deg) translateX(150px);
    -moz-transform: rotate(72deg) translateX(150px);
    -ms-transform: rotate(72deg) translateX(150px);
    -o-transform: rotate(72deg) translateX(150px);
    transform: rotate(72deg) translateX(150px);
    background: #ffe63d;
}
.circle:nth-child(3) {
    -webkit-transform: rotate(144deg) translateX(150px);
    -moz-transform: rotate(144deg) translateX(150px);
    -ms-transform: rotate(144deg) translateX(150px);
    -o-transform: rotate(144deg) translateX(150px);
    transform: rotate(144deg) translateX(150px);
    background: #50dc64;
}
.circle:nth-child(4) {
    -webkit-transform: rotate(216deg) translateX(150px);
    -moz-transform: rotate(216deg) translateX(150px);
    -ms-transform: rotate(216deg) translateX(150px);
    -o-transform: rotate(216deg) translateX(150px);
    transform: rotate(216deg) translateX(150px);
    background: #41c39d;
}
.circle:nth-child(5) {
    -webkit-transform: rotate(288deg) translateX(150px);
    -moz-transform: rotate(288deg) translateX(150px);
    -ms-transform: rotate(288deg) translateX(150px);
    -o-transform: rotate(288deg) translateX(150px);
    transform: rotate(288deg) translateX(150px);
    background: #4db5dc;
}
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes rotation {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}
@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

＆＃13;

<div class="circle-container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

＆＃13;

Answer 1

将鼠标悬停在父div上 - 仅限CSS的解决方案

.circle-container:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

JSFiddle

将鼠标悬停在每个圈子上 - jQuery解决方案：

父元素没有选择器，因此无法使用CSS解决方案

JS

$(".circle").mouseenter(function () {
    $(this).parent().addClass("paused");
});

$(".circle").mouseleave(function () {
    $(this).parent().removeClass("paused");
});

CSS

.circle-container.paused {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

JSFiddle

Answer 2

您可以使用animation-play-state: paused;暂停动画。

如果您将容器的width和height设置为0并使用transform-origin确保轮换顺利，:hover将仅悬停在孩子身上时要保持活跃。

（删除浏览器前言以提高可读性。仅在Firefox中测试）

＆＃13;

.circle-container {
  margin: 0 auto;
  position: relative;
  width: 0;
  height: 0;
  background: transparent;
  border-radius: 50%;
  transform-origin: 220px 220px;
  left: -220px;
  animation: rotation 6s linear 0s infinite normal none;
}
.circle-container:hover {
  animation-play-state: paused;
}
.circle {
  position: absolute;
  top: 170px;
  left: 170px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.7;
  transition: transform .5s;
}
.circle:nth-child(1) {
  transform: rotate(0deg) translateX(150px);
  background: #ff504f;
}
.circle:nth-child(1):hover {
  transform: rotate(0deg) translateX(150px) scale(2);
}
.circle:nth-child(2) {
  transform: rotate(72deg) translateX(150px);
  background: #ffe63d;
}
.circle:nth-child(2):hover {
  transform: rotate(72deg) translateX(150px) scale(2);
}
.circle:nth-child(3) {
  transform: rotate(144deg) translateX(150px);
  background: #50dc64;
}
.circle:nth-child(3):hover {
  transform: rotate(144deg) translateX(150px) scale(2);
}
.circle:nth-child(4) {
  transform: rotate(216deg) translateX(150px);
  background: #41c39d;
}
.circle:nth-child(4):hover {
  transform: rotate(216deg) translateX(150px) scale(2);
}
.circle:nth-child(5) {
  transform: rotate(288deg) translateX(150px);
  background: #4db5dc;
}
.circle:nth-child(5):hover {
  transform: rotate(288deg) translateX(150px) scale(2);
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-ms-keyframes rotation {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}
@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

＆＃13;

<div class="circle-container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

＆＃13;

Answer 3

CSS中没有父选择器，CSS中的暂停声明如下：

-webkit-animation-play-state: paused | running;

你必须使用Javascript或jQuery，它看起来像这样：

$(".circle").hover(
  function(){
    $(this).parent().css("-webkit-animation-play-state", "paused");
},
  function(){
    $(this).parent().css("-webkit-animation-play-state", "running");
});

如何阻止div在每个上面悬停转换？

3 个答案: