关于新奇的css

css 复制代码
background: linear-gradient(154deg, #07070915 30%, hsl(var(--primary) / 30%) 48%, #07070915 64%);
filter: blur(100px);
  1. background: linear-gradient(154deg, #07070915 30%, hsl(var(--primary) / 30%) 48%, #07070915 64%);

    • 这是一个线性渐变背景设置,角度为154度。
    • 渐变开始于颜色#07070915(这是一个带有透明度的颜色值,前6位代表颜色,最后两位代表透明度,这里的透明度为20%),并且这个颜色会覆盖从起点到30%位置的区域。
    • 在48%的位置上,颜色变为由hsl(var(--primary) / 30%)定义的颜色,这里使用了HSL颜色模式,并且亮度或饱和度通过变量--primary来动态调整,同时设置了透明度为30%。
    • 最后,在64%的位置之后,颜色再次变为#07070915
  2. filter: blur(100px);

    • 这个属性给整个元素添加了一个模糊效果,模糊半径为100px。这意味着任何在这个元素上的内容都会看起来像是被涂抹开来,创建一种朦胧的效果。

效果是这样的 有兴趣有的小伙伴可以自行试一下 还是好看的

相关推荐
左钦杨32 分钟前
Nuxt2 vue 给特定的页面 body 设置 background 不影响其他页面
前端·javascript·vue.js
yechaoa38 分钟前
【揭秘大厂】技术专项落地全流程
android·前端·后端
MurphyChen44 分钟前
🤯 一行代码,优雅的终结 React Context 嵌套地狱!
前端·react.js
逛逛GitHub1 小时前
推荐 10 个受欢迎的 OCR 开源项目
前端·后端·github
_xaboy1 小时前
开源 FormCreate 表单设计器配置组件的多语言
前端·vue.js·低代码·开源·可视化表单设计器
uglyduckling04121 小时前
小程序构建NPM失败
前端·小程序·npm
草原上唱山歌1 小时前
C/C++都有哪些开源的Web框架?
前端·c++·开源
烛阴1 小时前
JavaScript 调度:setTimeout 和 setInterval
前端·javascript
月巴月巴白勺合鸟月半2 小时前
工作记录 2017-02-03
前端·c#·健康医疗
伟笑2 小时前
npm 报错 unable to resolve dependency tree
前端·npm·node.js