作为一种常用的网页加载动画,其实用css 就能实现
首先我们写出一个常见的卡片样式,带有图片和文字
Compiler Explorer
是一个可以在浏览器里进行互动的编译工具。支持C、C++、Rust、Go、D、Haskell、Swift、Pascal或其他语言的代码,并能查看这些代码被实时编译的情况。
接着需要copy上面的html框架并加上loading类,实现下图结构
1.清除里面的文字和图片内容;2.调整内容区域的高度
在此基础上,还需要用css动画实现白色光影,从左至右加一个滑动效果
需要注意一点是,下方的两块区域,因为相对于上面image,水平方向有偏移,可以设置一个animation-delay
, 让整体看起来,像是一条光影造成的滑动,最终效果如图
点击查看完整demo代码(vue)