懒人原生css3实现图片由模糊到清晰逐渐加载过程

懒人原生css3实现图片由模糊到清晰逐渐加载过程-精品资源网
懒人原生css3实现图片由模糊到清晰逐渐加载过程
此内容为免费资源,请登录后查看
0
免费资源

懒人原生css3实现图片由模糊到清晰逐渐加载过程

效果描述:
在手机移动客户端,我们经常看到图片由模糊到清晰的加载过程
如果抛给你这样一个问题,你会怎么去实现呢
而且是在不用js的基础上实现
今天懒人站长写了这样一个效果,供给大家参考使用
其原理就是采用两张图片,一个模糊,一个清晰,用两个div叠加起来后
清晰的图片从完全透明变成全部显示出来,另外一个方向相反,默认加载时间为5秒
两者叠加起来就组成了这样一个动画过程,原理其实很简单
使用方法:
1、将lanren.css样式引入到你的页面中
2、将两个div放入页面即可(可以修改样式为你想要的)
(主意保持两个图片路径正确)
© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容