需要注意放大和旋转动画如果对同一个元素添加,会有一个不生效。解决方法是:再套一个父级容器,给父级容器添加放大。
<style>
#box {
margin: 300px auto;
width: 100px;
height: 100px;
background-color: green;
}
#box:hover {
animation: rotation 4s linear infinite;
}
#container:hover {
transform: scale(2);
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<div id="container">
<div id="box"></div>
</div>
记录记录!