如何从 CSS 按钮动画中消除闪烁？答案

【问题标题】：How to remove flicker from CSS button animation?如何从 CSS 按钮动画中消除闪烁？
【发布时间】：2017-07-25 02:58:29
【问题描述】：

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

这是 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 中添加一些东西，或者其他什么地方出错了，我不知道。谢谢您的帮助！ :-)

【问题讨论】：

我相信你需要为你的盒子阴影设置更多的参数。试试jsfiddle.net/m8f1k3sp/5

标签： html css

【解决方案1】：

只需将 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;    
}

【讨论】：

是否可以在圆形按钮中插入矩形框阴影（用直线而不是圆线阴影）？ jsfiddle.net/m8f1k3sp/8
@Daneesta 圆角来自按钮上的边框半径，无论如何这是一个不同的问题，我不确定是否可以修复。你可以专门问一个不同的问题
@Daneesta 实际上你可以像 jsfiddle.net/m8f1k3sp/9 包含元素的边界半径一样伪造它

【解决方案2】：

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

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

它可能对你有帮助。

.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%;
}

&lt;button type="submit" class="btn"&gt;Button&lt;/button&gt;

【讨论】：