面试官:鼠标悬停放大并一直旋转的正方形。

301 阅读1分钟

需要注意放大和旋转动画如果对同一个元素添加,会有一个不生效。解决方法是:再套一个父级容器,给父级容器添加放大。

     <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>

动画1.gif


记录记录!