我一直在尝试解决此问题,但以前找不到与我的问题匹配的任何答案,如果可以,我不知道如何使它起作用。

https://jsfiddle.net/z24qehew/



.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>





当您运行该示例时,您可以看到菱形在任何轻微移动时都会重置,这是因为形状在特定点基本是平坦的。

我认为这可能与容器的宽度有关,但是一旦您修改了容器,菱形就会偏离旋转中心。

非常感谢!

最佳答案

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

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


以上只会使您的菱形旋转。要使其完全发挥作用,最好首先简化标记。我建议使用一个容器和带有<a>伪元素的单个:before来实现菱形。

在这里采取了一些自由措施来减少代码,但是它可以正常工作:https://jsfiddle.net/z6dqd492/

希望这可以帮助!

关于css - CSS过渡随着鼠标在旋转形状上的移动而静止,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38885418/

10-13 08:17
查看更多