javascript - css怎样实现这种效果
PHPz
PHPz 2017-04-11 11:26:53
[JavaScript讨论组]

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

PHPz
PHPz

学习是最好的投资!

全部回复(3)
大家讲道理

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

PHPz

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

伊谢尔伦

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号