直播平台开发用CSS filter，让平台实现各种不同视觉效果

直播平台开发用CSS filter，让平台实现各种不同视觉效果的相关代码
电影效果
滤镜中的brightness用于调整图像的明暗度。默认值是1；小于1时图像变暗，为0时显示为全黑图像；大于1时图像显示比原图更明亮。

我们可以通过调整 背景图的明暗度 和 文字的透明度 ，来模拟电影谢幕的效果。

<div class="container">
<div class="pic"></div>
<div class="text">
<p>如果生活中有什么使你感到快乐，那就去做吧</p>
<br>
<p>不要管别人说什么</p>
</div>
</div>

.pic{
height: 100%;
width: 100%;
position: absolute;
background: url('./images/movie.webp') no-repeat;
background-size: cover;
animation: fade-away 2.5s linear forwards; //forwards当动画完成后，保持最后一帧的状态
}
.text{
position: absolute;
line-height: 55px;
color: #fff;
font-size: 36px;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
opacity: 0;
animation: show 2s cubic-bezier(.74,-0.1,.86,.83) forwards;
}

@keyframes fade-away { //背景图的明暗度动画
30%{
filter: brightness(1);
}
100%{
filter: brightness(0);
}
}
@keyframes show{ //文字的透明度动画
20%{
opacity: 0;
}
100%{
opacity: 1;
}
}

模糊效果

<ul class="cards">
<li class="card">
<p class="title">Flower</p>
<p class="content">The flowers mingle to form a blaze of color.</p>
</li>
<li class="card">
<p class="title">Sunset</p>
<p class="content">The sunset glow tinted the sky red.</p>
</li>
<li class="card">
<p class="title">Plain</p>
<p class="content">The winds came from the north, across the plains, funnelling down the valley. </p>
</li>
</ul>

实现的方式，是将背景加在.card元素的伪类上，当元素不是焦点时，为该元素的伪类加上滤镜。
.card:before{
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
filter: blur(0px) opacity(1);
transition: filter 200ms linear, transform 200ms linear;
}
/*
这里不能将滤镜直接加在.card元素，而是将背景和滤镜都加在伪类上。
因为，父元素加了滤镜，它的子元素都会一起由该滤镜改变。
如果滤镜直接加在.card元素上，会导致上面的文字也变模糊。
*/

//通过css选择器选出非hover的.card元素，给其伪类添加模糊、透明度和明暗度的滤镜

.cards:hover > .card:not(:hover):before{
filter: blur(5px) opacity(0.8) brightness(0.8);
}

//对于hover的元素，其伪类增强饱和度，尺寸放大

.card:hover:before{
filter: saturate(1.2);
transform: scale(1.05);
}

褪色效果
褪色效果可以打造出一种怀旧的风格。通过sepia滤镜将图像基调转换为深褐色，再通过降低 饱和度saturate 和 色相旋转hue-rotate 微调，模拟老照片的效果。

.pic{
border: 3px solid #fff;
box-shadow: 0 10px 50px #5f2f1182;
filter: sepia(30%) saturate(40%) hue-rotate(5deg);
transition: transform 1s;
}
.pic:hover{
filter: none;
transform: scale(1.2) translateX(10px);
z-index: 1;
}

以上就是 直播平台开发用CSS filter，让平台实现各种不同视觉效果的相关代码，更多内容欢迎关注之后的文章