CSS—文字智能适配背景
实现效果
实现思路:通过mix-blend-mode来让 父元素颜色和子元素颜色进行运算
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字智能适应背景</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.contain {
position: relative;
width: 100%;
height: 400px;
border: 1px solid #333;
display: grid;
grid-template-columns: repeat(1fr, 1fr);
background-color: #fff;
}
.contain-left {
width: 55%;
height: 400px;
border-top: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 200px solid transparent;
border-bottom: 400px solid #000000;
}
span {
position: absolute;
top: 8rem;
left: 5rem;
font-size: 80px;
mix-blend-mode: difference;
color: #fff;
font-weight: 700;
letter-spacing: 10px;
/* transition: all 2s; */
animation: move 3s ease infinite;
}
@keyframes move {
0% {
left: 5rem;
}
50% {
left: 70rem;
}
100% {
left: 5rem;
}
}
span:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="contain">
<div class="contain-left">
</div>
<span>HELLO WORLD</span>
</div>
</body>
</html>