Question

/ * html * / 这是html部分。

 <div class="second-menu-2-container">
        <div class="second-menu-2">
            <a href="#">Home</a>
            <a href="#">world</a>
            <a href="#">Tech</a>

        </div>    
    </div>

/ * css 3 * / 这是css 3部分。我把<a>标记了一些悬停比例变换，但不起作用。

 .second-menu-2-container {
            background-color: #A91717;
            width: 100%;
        }


 .second-menu-2 {
            width: 1000;
            margin: 0 auto;
            height: 30px;

        }
 .second-menu-2 a {
            transition: all 2s ease-in-out;  
            color: white;
            text-decoration: none;
            position: relative;
            top: 8px;
            padding: 0 10px;
            border-right: 1px solid #E4E4E4;
            font-weight: 100;   

        }

  .second-menu-2 a:hover {
            transform: scale(2);

        }

这是jsfiddle地址：https://jsfiddle.net/libaoming/xg692wy3/

Answer 1

您需要在转换后的元素上使用display: block;或display: inline-block;才能使其正常工作。见工作小提琴：https://jsfiddle.net/matikucharski/xg692wy3/3/

css动画比例在chrome中不起作用

1 个答案: