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

我正在研究一个项目，在那里我有一个动画按钮，它用颜色填充自己。如何从CSS按钮动画中删除闪烁？

下面是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中添加一些东西，或者其他的东西是错误的，我不知道。感谢您的帮助！ :-)

来源

2017-07-24 Danedesta

我相信你需要设置更多的参数，你的箱子的影子。试试https://jsfiddle.net/m8f1k3sp/5/ – Huangism

只需添加到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;  
}

来源

2017-07-24 18:58:29 Huangism

非常感谢！它现在完美的工作！ :-D – Danedesta

在圆形按钮中是否可以有矩形框阴影插图（用直线代替圆角线的阴影）？ https://jsfiddle.net/m8f1k3sp/8/ – Danedesta

@Danedesta圆角从按钮上的边界半径出来，无论如何，这是一个不同的问题，我不确定这是否可以修复。你可以特别提出一个不同的问题 – Huangism

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

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

它可以帮助你。

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

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

来源

2017-07-24 18:51:25

谢谢Nirav！ :-) – Danedesta

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

回答

相关问题