直播平台开发用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,让平台实现各种不同视觉效果的相关代码,更多内容欢迎关注之后的文章