天道酬勤,学无止境

动画合集

纯css加载动画合集

1、点点点加载<div class="dot">...</div>复制代码@supports (display: none) {div.dot { display: inline-block; width: 3ch; text-indent: -1ch; vertical-align: bottom; overflow: hidden; animation: dot 3s infinite step-start both; font-family: Consolas, Monaco, monospace; } } @keyframes dot {33% { text-indent: 0; }66% { text-indent: -2ch; } }复制代码2、条形加载条<ul class="strip-loading"><li style="--line-index: 1;"></li><li style="--line-index: 2;"></li><li style="--line-index: 3;"></li><li style="--line-index: 4;"></li><li style="--line-index: 5;"></li><li style="--line-index: 6;"></li></ul>复制代码.strip-loading {display

2021-05-13 16:30:52    分类:博客    css   动画合集