我用纯粹的 css 创建了一个链式 react ,以前在所有浏览器中都运行得很好,现在看起来它目前在 Chrome 中不起作用,但在其他浏览器中可以正常运行(不包括 I.E,我没有测试它)垃圾)好奇为什么会发生这种情况?我已经用尽我的资源来了解 chrome 中现在发生的事情,让它现在可以工作。
<a href="javascript:void(0)" class="btn-shadow btn-ripple">Button</a>
[class^="btn"],
[class*=" btn"]
display inline-flex
font-family 'Roboto', sans-serif
text-decoration none
justify-content center
align-items center
text-align center
cursor pointer
white-space nowrap
padding 8px 20px
font-size 14px
background-color white
border-radius 2px
color #434A54
text-transform uppercase
border none
box-shadow 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
transition all 0.4s ease-in-out
background-position 50%
outline none !important // we don't like outlines, nasty hobbits...
&:before {
content: '';
position: absolute;
background: red;
}
&:not([disabled])
&.btn-shadow
&:active
box-shadow 0 5px 10px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.23)
&.btn-ripple
transition all 0.4s ease-in-out
background-size 200%
&:active
background-repeat no-repeat
background-size 1000%
background-image radial-gradient(circle, rgba(0, 0, 0, .1) 10%, rgba(0, 0, 0, 0) 11%)
在这里查看它发生的情况: http://codepen.io/brycesnyder/pen/gPojeO?editors=1100
谢谢!
最佳答案
你的问题很有趣。
查看 Firefox 和 Chrome,我能够重现您所描述的内容。
阅读背景大小后想到的最简单的解决方案 property docs in W3schools
您忘记定义新background-size的x和y尺寸强>值(value)
试试这个:
&.btn-ripple
transition all 0.4s ease-in-out
background-size 200% 200%
&:active
background-repeat no-repeat
background-size 1000% 1000%
将这些值添加到您附加的 Codepen 中,我能够在 Chrome 51 中正确看到过渡。
希望这有帮助
关于css - 操纵背景图像径向过渡在 Chrome 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37750187/