Question

此代码用于平滑的按钮动画，但是我需要输入z-index，否则红色矩形位于文本之前。随着过渡的进行，文本变得模糊不清，到处移动。

我该如何解决？

#animate {
    font-size: 30px;
    position: relative;
    border: 2px solid #2c3e50;
    padding:20px 50px;
    z-index:1;
}

#animate:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background:red;
    left:0;
    top:0;
    transform:scaleX(0);
    transform-origin:left;
    z-index:-1; 
    transition:all .8s ease;
}

#animate:hover:after {
    z-index:-1;
    transform: scaleX(1);
    transform-origin: left;
    transition: all .8s ease;
}

Answer 1

html：

<html>
<head>
    <title>Test Css</title>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    <div id="div1">
        <a id="animate" href="#">Test</a>
    </div>
</body>
</html>

css：

body {
    background: #16a085;
    font-family:Calibri;
}

a {
    text-decoration: none;
    color: #2c3e50;
}

#div1{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

#animate {
    font-size: 30px;
    position: relative;
    border: 2px solid #2c3e50;
    padding:20px 50px;
    z-index:1;
}

#animate:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background:red;
    left:0;
    top:0;
    transform:scaleX(0);
    transform-origin:left;
    z-index:-1; 
    transition:all .8s ease;
}

#animate:hover:after {
    z-index:-1;
    transform: scaleX(1);
    transform-origin: left;
    transition: all .8s ease;
}

Answer 2

body {
    background: #16a085;
    font-family:Calibri;
}

a {
    text-decoration: none;
    color: white;
}

#div1{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

#animate {
    font-size: 30px;
    position: relative;
    border: 2px solid #2c3e50;
   display:block;
    padding:20px 50px;
   overflow:hidden;
}

#animate:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background:red;
    left:-100%;
    top:0;
    z-index:-1; 
    transition:all .8s ease;
}

#animate:hover:after {
    z-index:-1;
   left:0;
}

<html>
<head>
    <title>Test Css</title>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    <div id="div1">
        <a id="animate" href="#">Test</a>
    </div>
</body>
</html>

就是这样！

过渡z索引模糊

2 个答案: