переход z-index расплывчатый - PullRequest
Новая
       24

переход z-index расплывчатый

0 голосов
/ 23 мая 2019

этот код предназначен для плавной анимации кнопок, но мне нужно поместить в 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;
}

Ответы [ 2 ]

0 голосов
/ 24 мая 2019 

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>
вот оно!
0 голосов
/ 24 мая 2019

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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...