我希望div过渡到其:hover
样式,然后在悬停时和停下来时返回。我知道我可以使用动画,但是我不知道如何在这种情况下实现动画。
我希望它像这样转换(在悬停和展开时):
发件人:transform: perspective(320px) rotateX(0deg)
。
到:transform: perspective(320px) rotateX(30deg)
。
然后返回:transform: perspective(320px) rotateX(0deg)
。
#lorem {
width: 250px;
height: 18px;
background: #ff0000;
color: #fff;
text-align: center;
margin: auto;
padding: 12px;
transition: transform .75s ease-in-out;
}
#lorem:hover {
transform: perspective(320px) rotateX(30deg);
}
<div id="lorem">LOREM</div>
最佳答案
我最终使用了两个动画。关键是使动画具有不同的值,因为即使它们完全相同,即使使用不同的动画名称也不会触发它们。因此,您可以通过两个动画在1deg
中更改rotateX(0deg)
来触发更改
@keyframes fold {
0% {transform: perspective(320px) rotateX(0deg);}
50% {transform: perspective(320px) rotateX(30deg);}
100% {transform: perspective(320px) rotateX(0deg);}
}
@keyframes unfold {
0% {transform: perspective(320px) rotateX(0deg);}
50% {transform: perspective(320px) rotateX(15deg);}
100% {transform: perspective(320px) rotateX(0deg);}
}
#lorem {
width: 250px;
height: 18px;
background: #ff0000;
color: #fff;
text-align: center;
margin: auto;
padding: 12px;
transition: transform .75s ease-in-out;
animation: fold .75s ease-in-out 0s 1 normal;
}
#lorem:hover {
animation: unfold .75s ease-in-out 0s 1 normal;
}
<div id="lorem">LOREM</div>
关于css - 如何将元素转换为样式然后重新悬停?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38194030/