Stage1st

 找回密码
 立即注册
搜索
查看: 1321|回复: 13

[求助] 有没有做网站前端的大神帮忙解惑

[复制链接]
     
发表于 2021-6-3 00:27 | 显示全部楼层 |阅读模式
本帖最后由 弑神 于 2021-6-3 01:38 编辑

全部代码
https://codepen.io/kevinpowell/pen/QWdRzON

今天在CSS上面有个问题一直找不到答案在定义了一个伪类::before后利用transform 调整了一下角度
transform:perspective(1em) rotateX(40deg) scale(1, 0.35)




然后进行模糊
filter:blur(1em)
结果在chrome呈现的效果是这样


而在firefox呈现的效果是这样


firefox的效果是我想要的,但不知道为什么两个浏览器显示出来的差距这么大。
该怎么处理呢?


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

     
发表于 2021-6-3 00:30 来自手机 | 显示全部楼层
本帖最后由 巨灵巴谛魔 于 2021-6-3 01:57 编辑

回复

使用道具 举报

     
发表于 2021-6-3 00:33 来自手机 | 显示全部楼层
查一下浏览器私有属性

—— 来自 Xiaomi M2006C3LG, Android 10上的 S1Next-鹅版 v2.4.4.1
回复

使用道具 举报

     
 楼主| 发表于 2021-6-3 00:42 | 显示全部楼层
完全看不出来有什么属性叠加了

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

     
发表于 2021-6-3 00:58 | 显示全部楼层
代码贴全,放codepen吧。
回复

使用道具 举报

     
发表于 2021-6-3 01:37 | 显示全部楼层
Chrome 90.0.4430.212
快速试着开了个codepen,无法复现
回复

使用道具 举报

     
 楼主| 发表于 2021-6-3 01:38 | 显示全部楼层
redbuck 发表于 2021-6-3 00:58
代码贴全,放codepen吧。

https://codepen.io/kevinpowell/pen/QWdRzON
不同浏览器显示出来还是不一样
回复

使用道具 举报

     
 楼主| 发表于 2021-6-3 01:49 | 显示全部楼层
YoumuChan 发表于 2021-6-3 01:37
Chrome 90.0.4430.212
快速试着开了个codepen,无法复现

全部代码
https://codepen.io/kevinpowell/pen/QWdRzON








本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

     
发表于 2021-6-3 01:54 | 显示全部楼层
本帖最后由 PENTAX-DA 于 2021-6-3 01:55 编辑

edge效果,Microsoft Edge
版本 91.0.864.37 (官方内部版本) (64 位)


说明新webkit内核就是这么渲染的。
可以再找safari看看。


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

     
发表于 2021-6-3 02:05 | 显示全部楼层
应该是chrome的bug
https://drafts.csswg.org/css-tra ... ing-property-values
要求浏览器需要先执行filter再进行transform,明显chrome是先transform再filter的,firefox的表现是正常的。

解决方法:
反光不用::before来做,单独开一个container,在container::before里做filter,在container做transform,保证顺序

  1. .drop {
  2.   pointer-events: none;
  3.   position: absolute;
  4.   top: 120%;
  5.   left: 0;
  6.   width: 100%;
  7.   height: 100%;
  8.   transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
  9. }

  10. .drop::before {
  11.   content: "";
  12.   display: block;
  13.   width: 100%;
  14.   height: 100%;
  15.   background: var(--clr-neon);
  16.   filter: blur(1em);
  17.   opacity: 0.7;
  18. }
复制代码


  1. <a href="#" class="neon-button"><div class="drop"></div>Neon</a>
复制代码


我这里测试这样做以后效果和firefox一样

评分

参与人数 1战斗力 +1 收起 理由
凶手 + 1 学习了

查看全部评分

回复

使用道具 举报

     
发表于 2021-6-3 02:06 | 显示全部楼层
证明虽然到了2021 ,已经没有IE6,但是浏览器兼容还是前端开发最蛋疼的工作。复杂的展示效果就用图片好了
回复

使用道具 举报

     
发表于 2021-6-3 08:15 | 显示全部楼层
某浩 发表于 2021-6-3 02:06
证明虽然到了2021 ,已经没有IE6,但是浏览器兼容还是前端开发最蛋疼的工作。复杂的展示效果就用图片好了[f ...

昨天刚发现一个很绝的 逆向smooth scroll超过15000像素时会少一节
强制用polyfill才好 不过效果也不完全一样了
回复

使用道具 举报

     
 楼主| 发表于 2021-6-3 11:00 | 显示全部楼层
本帖最后由 弑神 于 2021-6-3 11:01 编辑

WOW!!真的牛!!完全OK!!拜谢……
回复

使用道具 举报

     
发表于 2021-6-3 11:31 | 显示全部楼层
看到这帖的标题我竟然产生了也许我也能回答一个的错觉
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|Archiver|上海互联网违法和不良信息举报中心|网上有害信息举报专区|962110 反电信诈骗|举报电话 021-62035905|stage1st ( 沪ICP备13020230号-1 沪公网安备 31010702004909号 )

GMT+8, 2021-6-17 05:18 , Processed in 0.035375 second(s), 9 queries , Gzip On, MemCache On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表