可以用动画和悬停比例尺制作html div吗？
可以用动画和悬停比例尺制作html div吗？
提问于 2019-01-11 17:04:45
我试着把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);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-11 21:39:14
这是因为animation-fill-mode: forwards;
如果animation-fill-mode的值不是none，那么当动画结束时，它将不应用css属性值。
因此，我将animation-fill-mode: forwards;从#animation-1样式规则中移除，transform: rotateY(90deg);从.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>
您也可以测试它的这里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54151031
复制相关文章
相似问题
腾讯云开发者
