猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

类似稀土掘金的加载占位功能是如何实现的？

在页面预加载时，类似下图的占位效果，是如何实现的，原理是什么？

https://img2.mukewang.com/5bfe017a0001cf9f08240655.jpg

暮色呼如
浏览 668回答 1
1回答

泛舟湖上清波郎朗

用div+css仿照正常数据的展示布局，用css写出灰色的条形，并添加一个颜色变化的动画。写个简单的例子吧：<!DOCTYPE html><html><head>&nbsp; &nbsp; <title></title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #ddd;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .container {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 320px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 360px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #ffffff;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .firstLine {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .secondLine {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 40%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .line {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #f9f9f9;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation: twinkle 1.5s infinite;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @keyframes twinkle {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: .5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; to {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: .9;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="firstLine line"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="secondLine line"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="firstLine line"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="secondLine line"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="firstLine line"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="secondLine line"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="firstLine line"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="secondLine line"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="firstLine line"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="secondLine line"></div>&nbsp; &nbsp; </div></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript