CSS滤镜,高斯模糊,图片融合,图像对比度,blur,contrast
说明
- filter: blur(): 给图像设置高斯模糊效果。
- filter: contrast(): 调整图像的对比度。
案例一
![请添加图片描述](https://i-blog.csdnimg.cn/blog_migrate/2e57e3c776092d24e9d980a2378c9b24.gif)
代码
Html
<div class="container">
<div class="filter-mix"></div>
</div>
css
.filter-mix {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
filter: contrast(20);
background: #fff;
}
.filter-mix::before {
content: "";
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background: #333;
top: 40px;
left: 40px;
z-index: 2;
filter: blur(6px);
box-sizing: border-box;
animation: filterBallMove 4s ease-out infinite;
}
.filter-mix::after {
content: "";
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background: #3F51B5;
top: 60px;
right: 40px;
z-index: 2;
filter: blur(6px);
animation: filterBallMove2 4s ease-out infinite;
}
@keyframes filterBallMove {
50% {
left: 140px;
}
}
@keyframes filterBallMove2 {
50% {
right: 140px;
}
}
案例二
![请添加图片描述](https://i-blog.csdnimg.cn/blog_migrate/98587d6b4617e45a4cdc4f24e279b443.gif)
代码
Html
<div class="container">
<h1>Blur word Animation</h1>
</div>
css
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
background-color: black;
}
.container {
width: 100%;
height: 100%;
position: relative;
padding: 2em;
filter: contrast(20);
background-color: black;
overflow: hidden;
}
h1 {
font-family: Righteous;
color: white;
font-size: 4rem;
text-transform: uppercase;
line-height: 1;
animation: letterspacing 5s infinite alternate ease-in-out;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
letter-spacing: -2.2rem;
}
@keyframes letterspacing {
0% {
letter-spacing: -2.2rem;
filter: blur(.3rem);
}
50% {
filter: blur(.5rem);
}
100% {
letter-spacing: .5rem;
filter: blur(0rem);
color: #fff;
}
}