css 混合模式
css的混合模式类似ps里的正片叠底功能，
混合模式可以是图片和背景色混合，也可以是图片和图片混合，设置方式有两种background-blend-mode 和mix-blend-mode；
混合模式Multiply，screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color,和luminosity. normal
可归类：
详细api
详细内容可查看：https://www.w3cplus.com/css3/basics-css-blend-modes.html
效果如下图：图2是鼠标经过后的效果
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bgImg1{
width: 400px;
height: 250px;
background: url(timg.jpg);
background-color: red;
background-size: 400px 250px;
background-blend-mode:multiply;
}
.bgImg1:hover{
background-color: #fff;
}
.bg{
width: 400px;
height: 250px;
background: url(timg.jpg);
background-size: 400px 250px;
position: relative;
}
.bigImg2{
width: 400px;
height: 250px;
background-color: #00ffcd;
mix-blend-mode:multiply;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="bgImg1"></div><!--background-blend-mode-->
<div class="bg"><!--mix-blend-mode-->
<div class="bigImg2"></div>
</div>
</body>
</html>
利用css混合模式实现动画
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-image: linear-gradient(90deg,#fff 49.9%,#000 50%);
}
.text{
position: absolute;
font-size: 63px;
width: 350px;
height: 80px;
line-height: 80px;
text-align: center;
color: #fff;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -350px;
overflow: hidden;
mix-blend-mode:difference;
animation: textanimate 6s ease infinite;
}
@keyframes textanimate{
0%{
margin-left: -350px;
}
50%{
margin-left: 0px;
}
100%{
margin-left: -350px;
}
}
</style>
</head>
<body>
<div class="text">Hello Word</div>
</body>
</html>