css怎样实现这种效果

https://stupid-studio.com/
这个网站上的当鼠标经过图片时,从左上角至右下角那个遮盖效果是怎样实现的,求大神给个思路!谢谢

阅读 3.1k
4 个回答
新手上路,请多包涵

用一个大一点的矩形旋转一定角度,绝对定位到盒子的外部,然后当鼠标滑入的时候修改矩形的定位,注意设置父元素的overflow为hidden,计算好矩形的大小和角度,这个不难实现的

遮罩是一个旋转45度的正方形,把这个正方形定位到图片左上角并且隐藏掉,剩下的就是通过css3的transform进行动画了

网页都有……直接开F12,把css给down下来看那看不就知道了……

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题