猿问

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

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

暮色呼如
浏览 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

相关分类

JavaScript
我要回答