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