如果在mix-blend-mode
属性之前使用动画效果,则不会获得混合混合模式。
删除动画类或禁用动画后,mix-blend-mode
将起作用。
问题是什么?我花了几个小时来解决这个简单的问题。请帮忙
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
}
.box img{ mix-blend-mode:multiply}
.animate{
border:1px solid red;
width:30px; height:30px;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}
<div class="animate">123</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
混合混合无论如何都应该生效
最佳答案
在过去,添加用于解决许多问题的转换transformZ(0px)。
至少在我的Chrome中,情况似乎仍然如此:
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
transform: translateZ(0px); /* added */
}
.box img{ mix-blend-mode:multiply}
.animate{
border:1px solid red;
width:30px; height:30px;
animation: spin 2s infinite linear;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}
<div class="animate">123</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
关于css - 混合混合模式与动画之间的冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57724973/