CSS 鼠标在旋转的形状上移动时过渡静止

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

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

.diamond-container:hover .diamond {
    animation: rotateY 5s ease-in-out;
}

以上只会让你的菱形旋转。要使其完全正常工作，最好先简化标记。我建议使用容器和带有 :before 伪元素的单个 <a> 来获得钻石。

在这里进行了一些自由操作以减少代码，但它正在运行：https://jsfiddle.net/z6dqd492/

希望对您有所帮助！

CSS 鼠标在旋转的形状上移动时过渡静止

CSS Transition Rests as mouse moves on a rotated shape

css

css-transitions

css-transforms