css 半透明 渐隐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.anim-opacity2 {
animation: 2s opacity2 0s infinite;
-webkit-animation: 2s opacity2 0s infinite;
-moz-animation: 2s opacity2 0s infinite;
}
@keyframes opacity2 {
0% {
opacity: 0
}
50% {
opacity: .8;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes opacity2 {
0% {
opacity: 0
}
50% {
opacity: .8;
}
100% {
opacity: 0;
}
}
@-moz-keyframes opacity2 {
0% {
opacity: 0
}
50% {
opacity: .8;
}
100% {
opacity: 0;
}
}
.Test {
display: inline-block;
width: 366px;
height: 278px;
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.Test img {
mix-blend-mode: overlay;
}
</style>
</head>
<body>
<div class="Test">
<img alt=""
src="http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=34480776be0e7bec238f0be51a1e950e/b3fb43166d224f4a2ded606a0ff790529822d156.jpg">
</div>
<h1 class="anim-opacity2">测试</h1>
</body>
</html>
