我正在努力让mix-blend-mode
背景幻灯片发生。我已经把它放在一起工作的 jsfiddle。
问题是,需要它看起来更像这样。
但我不想摆脱它的倾斜或从右侧滑入。我尝试使用与该示例相同的混合模式,但无论我做什么,它都不会保持悬停时的红色幻灯片颜色和红色下的白色文本。我只想使用伪元素并将 html 保持在最低限度。我认为使用伪元素可以做到这一点,但是混合模式不与我合作,也不知道如何让它看起来更像第二把小提琴。我的html如下:
<a href="#" class="btn">View Project</a>
CSS是:
a {
position: relative;
text-decoration: none;
display: inline-block;
padding: 15px 30px;
border: 1px solid #f16251;
background: black;
color: #f16251;
font-size: 30px;
font-family: arial;
mix-blend-mode: normal;
overflow:hidden;
z-index: 1;
}
a:before {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0;
width: 100%; height: 100%;
background: red;
mix-blend-mode: multiply;
transform-origin:0 0 ;
transform:translateX(100%) skewX(30deg);
transition: transform .25s;
z-index: 3;
}
a:hover:before {
transform: translateX(45%) skewX(30deg);
}
a:hover:after {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
width: 100%;
height: 100%;
background: white;
}
a:after {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0;
width: 100%; height: 100%;
background: white;
mix-blend-mode: difference;
z-index: 2;
}
仅当红色滑过该文本时,如何使背景文本以白色显示?我的mix-blend-mode
代码一定是错误的,但看起来可以在这里做。