我正在开发一个项目,其中有一个动画按钮,它会自动填充颜色。
这是 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/ https://jsfiddle.net/m8f1k3sp/
这段代码的问题是,当按钮自动填充时,它会随机闪烁,我不知道为什么。也许我只是忘记在CSS中添加一些东西,或者其他什么地方是错误的,我不知道。感谢您的帮助! :-)
只需将 1px 添加到扩展半径即可,我不知道为什么会出现 0 扩展半径可能是浏览器渲染的问题?但是添加 1px 就可以解决问题
https://jsfiddle.net/m8f1k3sp/6/ https://jsfiddle.net/m8f1k3sp/6/
CSS
.button:hover {
box-shadow: inset 51px 0 0 1px #1161ee;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)