首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    毛玻璃 CSS 特效的兼容性方案探究

    果不其然,导航栏就用到了“家族式设计”的“毛玻璃”特效 打开控制台抄一抄作业: 主要是用到了 backdrop-filter CSS3 的属性,于是乎,顺手就用上了。...去查了查兼容性:backdrop-filter -- caiuse[1] emmm~,再考虑到我司自己魔改的 Webview 内核情况。。。...阴影 grayscale(): 灰度 hue-rotate(): 色相旋转 invert(): 反色 opacity(): 透明度 saturate(): 饱和度 sepia(): 褐色 如果不考虑兼容性...3.1 ::before + 固定双背景图 这里偷个懒,直接使用了伪元素 ::before,实际场景为了考虑兼容性,建议大家还是用 div 块级元素占位 .card-filter::before {...如果“毛玻璃”和背景没有文中的相对移动,直接让 UI 小姐姐切个图,直接解决一切兼容性 & 性能问题!

    1.8K10

    网站页面滚动加载动画JS特效

    终于尘埃落定了,前段时间忙的不可开交,结婚,工作,因为婚假+年假一起休的,导致很长时间没有更新博客了,今天抽空给大家带来了一个js特效,网站模块延迟加载的动画,假期之前就想着制作这个功能,页面滚动加载...不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件...浏览器兼容 IE10+ Chrome Firefox Opera Safari IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果,并且因为不支持一些属性或方法会报错...为了达到更好的兼容,最好加一个浏览器及版本判断。...如果不喜欢这个可以试试wow.js,网站页面滚动加载动画JS特效(二)。

    11.4K20
    领券