css - 性能更好的 CSS 过滤器替代方案:blur()
问题描述
我开始研究一个大量使用模糊效果的反应项目。
它将添加到 div 的图标作为背景并将其模糊。
因此,具有不同图标的每个部分都有不同的创辉背景。
我附上了图片,因为我认为我解释得不好:
我不确定要附加代码的哪一部分,所以我将把影响它的反应组件和 css 放在这里:
反应组件
import React from 'react';
import './Object.css';
const Jobs = ({ employer, description, descriptionList, image }) => {
return (
<div>
<section className="object-container">
<div className="container">
<div className="object">
<div className="row">
<div className="col-sm-8">
<h3 className="employer">
{employer}
</h3>
<div className="description">
{description}
</div>
<ul className="description-list">
{descriptionList.map(item => <li>{item}</li>)}
</ul>
</div>
<div className="image-container">
<div className="col-sm-4">
<img className="image" src={image} alt="logo" />
</div>
</div>
</div>
</div>
</div>
<div className="object__bg" id="object__bg" style={{ backgroundImage: `url(${image})` }}>
</div>
</section>
</div >
);
}
export default Jobs;
CSS
@font-face {
font-family: 'Neon Online';
src: url(I_am_online_with_u.ttf) format('truetype'),
url(I_am_online_with_u.woff) format('woff');
}
.object {
padding: 40px;
background-color: rgba(53, 53, 53, 0.45);
border-radius: 20px;
box-shadow: 0px 3px 28px 1px rgba(0,0,0,0.75);
color: white;
display: flex;
align-items: center;
transform: scale(1);
transition: all 0.15s ease-in;
/*
This is used for improving performance with blur filter.
Why does it work, I have no idea...
*/
backface-visibility: hidden;
perspective: 1000;
transform: translate3d(0,0,0);
transform: translateZ(0);
}
.object:hover {
box-shadow: 0px 3px 32px 1px rgba(0,0,0,0.9);
background-color: rgba(53, 53, 53, 0.55);
transform: scale(1.01);
transition: all 0.31s ease-out;
}
.object-container {
position: relative;
padding: 40px;
/*
This is used for improving performance with blur filter.
Why does it work, I have no idea...
*/
backface-visibility: hidden;
perspective: 1000;
transform: translate3d(0,0,0);
transform: translateZ(0);
}
.object__bg {
position: absolute;
z-index: -1;
top: 0;
left: -10vw;
right: 0;
margin: auto;
width: 120vw;
min-height: 100px;
height: 100%;
filter: blur(150px) saturate(2) hue-rotate(0deg);
background-position: center center;
background-size: cover;
background-color: #353535;
transition: all 1.5s ease-out;
}
.object__bg:hover,
.object__bg:focus {
filter: blur(150px) saturate(2.6) hue-rotate(180deg);
transition: all 3s ease-in;
}
.image-container {
display: flex;
align-items: center;
justify-content: center;
}
.image {
width: 200px;
}
我想到了 canvas 和 svg 过滤器,因为我读了几次,它的模糊效果显着提高了性能。不幸的是,在尝试了几次之后,我并没有设法让它与 React 一起工作。
我还尝试为覆盖模糊的元素添加背面可见性,这有帮助(可能是因为它迫使 GPU 而不是 CPU 来完成工作,我不确定)。
那么,目前是否有任何替代方案可以帮助我建立一个大量使用模糊的网站?
解决方案
推荐阅读
- reactjs - 尝试使用 redux 将值保存到我的商店,但它似乎不起作用
- concurrency - 如何在 fp-ts 中限制并发
- excel - Microsoft.Mashup.OleDb.1 提供程序未在本地计算机上注册
- javascript - 在没有画布的情况下获取按钮单击事件
- amazon-web-services - 通过 IAM Role 从长期运行的 ASP.NET Core 服务访问 AWS 服务
- angular - 如何根据条件使输入字段需要?
- python-3.x - 当用相同的值编辑单元格时,有没有办法发出信号?
- visual-c++ - 无法使用 ReadExisting() 保留大于 127 的字节值;
- php - 没有显示 human_time_diff 的输出
- apache-nifi - 当其中一条记录已存在于数据库中时,PutDataBaseRecord 不会插入任何记录