html - 为文本块添加逐渐增加的模糊
问题描述
我有这段文字:
<div class"blur-gradient">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean et tortor at risus viverra adipiscing at in. Cursus vitae congue mauris rhoncus aenean vel. Tristique nulla aliquet enim tortor at auctor urna nunc id. Nisl tincidunt eget nullam non. Purus sit amet luctus venenatis lectus magna fringilla. Velit scelerisque in dictum non consectetur a erat nam. Vel pretium lectus quam id leo in. Tristique nulla aliquet enim tortor at auctor. In vitae turpis massa sed elementum. Erat imperdiet sed euismod nisi porta lorem mollis. Mattis enim ut tellus elementum sagittis. Convallis tellus id interdum velit laoreet id. Urna condimentum mattis pellentesque id nibh tortor id. Vitae congue mauris rhoncus aenean vel. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Nulla porttitor massa id neque aliquam vestibulum morbi. Condimentum mattis pellentesque id nibh tortor id.
</p>
<p>
Volutpat lacus laoreet non curabitur gravida arcu ac. Id aliquet lectus proin nibh nisl condimentum id. Sapien faucibus et molestie ac feugiat sed lectus. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Dui vivamus arcu felis bibendum. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Risus nullam eget felis eget nunc lobortis. Accumsan sit amet nulla facilisi morbi. Elit eget gravida cum sociis natoque penatibus et magnis. Morbi tempus iaculis urna id volutpat lacus laoreet. In nibh mauris cursus mattis molestie a iaculis at erat. Fermentum dui faucibus in ornare quam. Duis at tellus at urna condimentum mattis pellentesque id. Est ullamcorper eget nulla facilisi. Sed arcu non odio euismod lacinia. Orci ac auctor augue mauris augue neque gravida in fermentum.
</p>
</div>
我希望文本以 . 开头filter: blur(0px)
和结尾filter: blur(4px)
。
这可以用css吗?如果是这样,你建议我怎么做?
解决方案
所以我们绝对不能在css的一个元素中应用双重样式。例如,这是 css 中的错误方法。
p{
filter:blur(0px);
...
filter:blur(4px); // will set this style instead of 0px. ignoring above one.
font-size: 10px;
...
font-size: 13px; // will set font-size to 13px instead of 10px; ignoring above one.
}
你可以接近的唯一方法是你应该把你的文本分成几个部分
然后将 css 应用于每个 p。
.blur-gradient p:nth-child(1){
filter: blur(1px);
}
.blur-gradient p:nth-child(2){
filter: blur(2px);
}
...
为了更流畅,您应该越来越多地划分文本。这只是一种方式。您可以制作 javascript 代码,但不推荐。
推荐阅读
- javascript - 递归地从 javascript 对象中添加和删除值
- python - 覆盖 AuthenticationForm 类以使用电子邮件登录
- c# - 统一:绳索摆动 3d 角色在开始时跳跃
- docker - 如何创建 Docker 本地私有仓库
- vue.js - 两个组件之间的通信(与子父级无关)
- azure-powershell - SAS 令牌作为 SecureString 不适用于使用 Azure PowerShell 的 ARM 模板部署
- if-statement - 如何在jmeter的if控制器中使用属性变量
- javascript - 从中读取 [.] 的 URL 扩展
- selenium-webdriver - 如何在 IE11 中找出基于客户端服务器的 Web 应用程序中元素的 xpath?
- certificate - 用于在 Java 中签署证书的智能卡类型