css好看的骨架屏动画效果
h5项目中使用骨架屏占位,感觉网上的闪烁效果不好看,自己弄了一个,动画时长可自行根据dom大小调整
演示文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>骨架屏动画效果</title> <style> #grad1 { height: 200px; width: 400px; animation: loading 8s linear infinite; background-image: linear-gradient(50deg, #e8e7e7, #e8e7e7 52%, #f1f1f1 55%, #e8e7e7 58%, #e8e7e7); background-size: 400% 100%; } @keyframes loading { 0% { background-position: 400% 50% } to { background-position: 0% 50% } } </style> </head> <body> <div id="grad1"></div> </body> </html>