所以我目前正在做一个内存游戏元素。
http://digitaljo.sh/memory-game/index.html
我想要完成的是在两张匹配的卡片变绿时对它们进行缩放/缩放效果。
( https://css-tricks.com/snippets/css/scale-on-hover-with-webkit-transition/ )
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }
===================================
这看起来取决于用户将鼠标悬停在元素上。当我确定两张卡匹配时,我想应用它。
我将如何着手更改此代码以实现该目标?
我试过做类似的事情
.grow {
animation: zoom;
}
@keyframes zoom {
100% {
transform: scale(1.1);
}
}
但这也行不通。 (完全是猜测,因为我不确定 css 关键帧是如何工作的。
非常感谢任何帮助,谢谢!
最佳答案
正确设置动画属性。
.grow {
动画:缩放 1s 正常;
}
并用卡片匹配将 .grow
类分配给这些元素。
关于html - 如何应用缩放效果,但不在悬停时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50143345/