Question

在示例中，我在Chrome上出现模糊文字时遇到问题。如果我删除z-index，文本会变得清晰但在动画时它会在:: after元素下消失。

有什么想法吗？

HTML

<button id="send" type="submit">SUBMIT</button>

CSS

#send{
    z-index: 1;
    padding: 0px;
    width: 25%;
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    overflow: hidden;
    position: relative;


    -webkit-transition: .36s cubic-bezier(0.4, 0.0, 1, 1);
    -moz-transition: .36s cubic-bezier(0.4, 0.0, 1, 1);
    -ms-transition: .36s cubic-bezier(0.4, 0.0, 1, 1);
    -o-transition: .36s cubic-bezier(0.4, 0.0, 1, 1);
    transition: .36s cubic-bezier(0.4, 0.0, 1, 1);
}

#send::before{
    -webkit-font-smoothing: antialiased;
    z-index: -1;
    content: '';
    position: absolute;
    background-color: rgb(113, 113, 113);

    width: 200%;
    height: 500%;
    border-radius: 100%;

    transform: translate(-120%,20%) translateZ(0);

    -webkit-transition: .36s cubic-bezier(0.4, 0.0, 1, 1);
    -moz-transition: .36s cubic-bezier(0.4, 0.0, 1, 1);
    -ms-transition: .36s cubic-bezier(0.4, 0.0, 1, 1);
    -o-transition: .36s cubic-bezier(0.4, 0.0, 1, 1);
    transition: .36s cubic-bezier(0.4, 0.0, 1, 1);
}

#send:hover::before{
    transform: translate(-45%,-34%) translateZ(0);
}

#send:hover{
    color: rgb(255, 255, 255);
    border-color: rgba(223, 244, 245, 0.85);
}

Answer 1

编辑：我误解了这个问题，但我没有铬的文字模糊的问题。对不起！转换时图像和文本元素会变得柔和，这可能会对您产生影响。

添加：

#send:hover .blur {
filter: blur(.8px);
}

到css，这到html：

<button id="send" type="submit"><span class="blur">SUBMIT</span></button>

它适用于我，但不适用于所有浏览器。

Answer 2

尝试添加：

-webkit-font-smoothing: antialiased;

按钮属性。

使用:: after伪元素的Chrome上的模糊文本

2 个答案: