Question

我一直在努力解决这个问题我之前找不到任何与我的问题相符的答案，如果我有，那么我不明白如何让这个工作。

.diamond-container:hover, .diamond-container:active {
    -webkit-animation: all 5s linear infinite;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;

    }

    @-webkit-keyframes all
    {

    0%   {-webkit-transform: rotateY(0deg);}
    100% {-webkit-transform: rotateY(720deg);}

     }

     .tile-link {
     font-size: 20px;
     text-transform: uppercase;
     float:left;
     position: absolute;
     top: 47px;
     left: 11px;
     text-align: center;
     width: 200px;
      }
 
     .diamond-container:hover > .diamond{
     background: rgba(250, 255, 0, 1);
     -webkit-transition: 0.5s ease-in-out;
     -moz-transition: 0.5s ease-in-out;
     -o-transition: 0.5s ease-in-out;
     transition: 0.5s ease-in-out;
      }

    .diamond-container:hover > .tile-link a{
    color: #000;
    text-decoration: none;
     }

    .diamond-container {
    width: 250px;
    height: 250px;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
    padding: 10px;
     }



     .diamond {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 150px;
    height: 150px;
    border: 5px solid rgba(250, 255, 0, 1);
    font: normal 100%/normal Arial, Helvetica, sans-serif;
    color: rgba(0, 0, 0, 1);
    -o-text-overflow: clip;
    text-overflow: clip;
    background: rgba(255, 255, 255, 0.5);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
    transform-origin: bottom center;
     }

                <div class="diamond-container">
                    <div class="diamond">
                    </div>
                    <div class="tile-link">
                        <a href="#" class="yellow tile-link">Link</a>
                    </div>
                </div>

当您运行该示例时，您可以看到钻石重置任何轻微的移动，因为形状在特定点基本上是平的。

我认为这可能与容器的宽度有关，但是一旦修改容器，钻石就会在旋转时偏离中心。

非常感谢！

Answer 1

问题是在悬停时触发动画的元素与动画相同，因此当鼠标移动时会发生新的悬停事件。而是在父项悬停时将动画应用于子元素。

xxd

以上只会使你的钻石形状旋转。为了让它完全起作用，最好先简化标记。我建议使用一个容器和一个带有.diamond-container:hover .diamond { animation: rotateY 5s ease-in-out; }伪元素的<a>来获得钻石。

在这里采取一些自由来减少代码，但它正在运作：https://jsfiddle.net/z6dqd492/

希望这有帮助！

CSS Transition当鼠标在旋转的形状上移动时休止

1 个答案: