Question

我在一个项目上工作，我有一个动画按钮，它用颜色填充自己。

这是HTML代码：

<input type="submit" class="button" value="Button">

这是CSS代码：

.button{
    border: 3px solid #1161ee;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 rgba(17,97,238,0);
    -webkit-transition: all ease 0.8s;
    -moz-transition: all ease 0.8s;
    transition: all ease 0.8s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;   
}

.button:hover {
    box-shadow: inset 51px 0 0 0 #1161ee;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;    
}

你可以在这里看到它:-)：

https://jsfiddle.net/m8f1k3sp/

这段代码的问题在于，当按钮填满时，它会随机闪烁，我不知道为什么。也许我只是忘了在CSS中添加一些东西，或者别的东西是错的，我不知道。谢谢您的帮助！： - ）

Answer 1

在这里你可以试试这个小提琴。

这是一个例子。它与你的代码不相似。

它可能对你有所帮助。

＆＃13;

.btn {
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
    padding: 25px 80px;
    display: inline-block;
    margin: 15px 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}
.btn {
    border: 3px solid red;
    color: red;
}
.btn:hover {
    color: #fff;
}
.btn::after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}
.btn:after {
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
    background: red;
}
.btn:hover:after, .btn:active:after {
    width: 100%;
}

＆＃13;

<button type="submit" class="btn">Button</button>

＆＃13;

Answer 2

只需将1px添加到展开半径，我就不知道为什么它发生在0展开半径可能是浏览器呈现的东西？但添加1px将解决问题

https://jsfiddle.net/m8f1k3sp/6/

CSS

.button:hover {
     box-shadow: inset 51px 0 0 1px #1161ee;
     -webkit-perspective: 1000;
     -webkit-backface-visibility: hidden;    
}

如何从CSS按钮动画中删除闪烁？

2 个答案: