我尝试将 div 作为链接到另一个子页面的按钮。我对它们进行动画处理,以便它们在访问网站时旋转。现在我想制作一个可以缩放按钮的悬停效果。但它似乎没有得到认可。当我评论动画时,它起作用了。有没有办法让动画和悬停效果?
提前致谢!
.animation-links div {
background: #444;
margin: 10px;
text-align: center;
height: 100px;
transform: rotateY(90deg);
transform-origin: center;
}
#animation-1 {
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
animation-name: animated;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
} animation-delay: 0.5s;
@keyframes animated {
0% {
transform: rotateY(90deg);
}
100% {
transform: rotateY(0);
}
}
}
.animation-links div:hover {
transform: scale(1.10);
}
最佳答案
这是因为animation-fill-mode: forwards;
如果 animation-fill-mode
的值不是 none 那么当动画结束时它不会应用 css 属性值。
所以我从 #animation-1
样式规则和 transform: rotateY(90deg);
中删除了 animation-fill-mode: forwards;
> 来自 .animation-links div
样式规则。大括号外还有一些额外的 {
和样式集。我也删除了它们。
请参阅下面的代码段:
.animation-links div {
background: #444;
margin: 10px;
text-align: center;
height: 100px;
transform-origin: center;
}
#animation-1 {
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
animation-name: animated;
animation-duration: 1s;
/*animation-fill-mode: forwards;*/
animation-delay: 0.5s;
transition: transform 1s ease;
}
@keyframes animated {
0% {
transform: rotateY(90deg);
}
100% {
transform: rotateY(0);
}
}
.animation-links div:hover {
transform: scale(2);
}
<div class="animation-links">
<div id="animation-1">Animation 1</div>
</div>
可以测试一下here还有。
关于html - 是否可以制作带有动画和悬停比例的 html div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54151031/