CSS滤镜,高斯模糊，图片融合，图像对比度，blur,contrast

CSS滤镜,高斯模糊，图片融合，图像对比度，blur,contrast

• 说明
• 案例一
  • 在线体验馆
  • 代码
    • Html
    • css
• 案例二
  • 在线体验馆
  • 代码
    • Html
    • css

 

说明

• filter: blur()： 给图像设置高斯模糊效果。
• filter: contrast()： 调整图像的对比度。

案例一

在线体验馆

代码

Html

<div class="container">
    <div class="filter-mix"></div>
</div> 

• 1
• 2
• 3

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;

}

}

案例二

在线体验馆

代码

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;
}


50% {
    filter: blur(.5rem);
}

100% {
    letter-spacing: .5rem;
    filter: blur(0rem);
    color: #fff;
}
}