mix-blend-mode 属性详解
mix-blend-mode 定义了两个元素之间的颜色混合模式；
mix-blend-mode: difference：将前景色减去背景色的值，并取绝对值；这会导致一个反相的效果
示例代码
<style>
.cus-banner {
height: 300px;
background: linear-gradient(60deg, #000, #000 50%, #fff 50%);
display: flex;
justify-content: center;
align-items: center;
}
.cus-title {
font-size: 80px;
transition: 0.5s;
mix-blend-mode: difference;
color: #fff !important;
}
.cus-banner:hover .cus-title {
transform: translateX(-100px);
}
</style>
<div class="cus-banner">
<p class="cus-title">hello ricepudding</p>
</div>
效果展示
打赏作者
您的打赏是我前进的动力
微信
支付宝
CSS 高级✍️ 面试题
上一篇
评论
