当前位置：首页 > 科技观察

纯CSS实现十个相当不错的加载效果

时间：2023-03-17 19:50:33 科技观察

看T.Afif[1]在推特上介绍的十个加载效果。如上所示。嗯，很棒，很实用，所以记录下来。为了保证正常运行，我们先规定：*{box-sizing:border-box;}1.平滑加载

.progress-1{width:120px;高度：20px；背景：线性渐变（#00000）0/0%不重复#ddd；animation:p12sinfinitelinear;}@keyframesp1{100%{background-size:100%}}linear-gradient(#00000)你可以理解为linear-gradient(#0000100%)，如果你不熟悉的，copylinear-gradient(#000050%,#f0050%0)，替换原来的部分运行。如果你觉得linear-gradient(#00000)很别扭，直接写#000就可以了。0/0%是background-position:0;/background-size:0;的简写.2.逐步加载

.progress-2{width:120px;高度：20px；边界半径：20px；背景：线性渐变（橙色00）0/0%不重复浅蓝色；animation:p22sinfinitesteps(10);}@keyframesp2{100%{background-size:110%}}steps(10)是step(10,end)的简写，表示开头没有，所以有第二点处理100%{background-size:110%}再加一个步长百分比，上面的步长是10，所以就是100%+(1/10)*100%=110%3。条纹加载

.progress-3{width:120px;高度：20px；边界半径：20px；背景：重复线性渐变（135deg，#f03355010px，#ffa516020px）0/0%不重复，重复线性渐变（135deg，#ddd010px，#eee020px）0/100%;动画：p32s无限；}@keyframesp3{100%{background-size:100%}}repeating-linear-gradient(135deg,#ddd010px,#eee020px)0/100%;绘制灰色斑马条纹，repeating-linear-gradient(135deg,#f03355010px,#ffa516020px)0/0%no-repeat为进度条加载条纹。4.虚线加载

.progress-4{width:120px;高度：20px；-webkit-mask:linear-gradient(90deg,#00070%,#00000)0/20%;背景：线性渐变（#00000）0/0%不重复#ddd；animation:p42sinfinitesteps(6);}@keyframesp4{100%{background-size:120%}}-webkit-mask默认值为repeat，否则不会有五个mask。5.池加载.progress-5{width:80px;高度：40px；边框：2px实心#000；填充：3px；背景：重复线性渐变（90deg，#000010px，#0000016px）0/0％无重复内容框内容框；位置：相对；动画：p52s无限步数（6）；}.progress-5::before{内容：“”；位置：绝对；顶部：50%；左：100%；变换：翻译Y(-50%)；宽度：10px；高度：10px；border:2pxsolid#000;}@keyframesp5{100%{background-size:120%}}原作者对.progress-5::before伪元素现实如下：.progress-5::before{content:"";位置：绝对；顶部：-2px；底部：-2px；左：100%；宽度：10px；背景：线性渐变（#0000计算（50%-7px），#0000计算（50%-5px），#00000计算（50%+5px），#0000计算（50%+7px），#00000)left/100%100%,线性渐变(#000calc(50%-5px),#00000calc(50%+5px),#0000)left/2px100%,线性渐变(#0000计算(50%-5px),#0000计算(50%+5px),#00000)右/2px100%;background-repeat:no-repeat;}#0000是透明的，和transparent6一样。inlineloading这个名字有点不合适，不过不重要，读者看图自然就明白了.progress-6{width:120px;高度：22px；边界半径：20px；颜色：#514b82；边框：2px实心；位置：相对；}.progress-6::before{内容：“”；位置：绝对；边距：2px；插图：0100%00；边界半径：继承；背景：#514b82；动画：p62s无限；}@keyframesp6{100%{inset:0}}inset:0100%00;右缩进为100%，所以需要在keyframes部分设置inset为0。7.珠链加载.progress-7{width:120px;高度：24px；-webkit-mask：径向渐变（圆圈最近侧，#00094%，#0000）00/25%100%，线性渐变（#00000）中心/计算（100%-12px）计算（100%-12px)不重复；背景：线性渐变（#25b09b00）0/0%无重复#ddd；animation:p72sinfinitelinear;}@keyframesp7{100%{background-size:100%}}mask-webkit-mask中的radial-gradient就是把width改成四每个部分画一个圆，最小的最接近-side作为直径。8.斑马线加载.progress-8{width:60px;高度：60px；边界半径：50%；-webkit-mask:linear-gradient(0deg,#00055%,#00000)bottom/100%18.18%;背景：线性渐变（#f0335500）底部/100%0%无重复#ddd；animation:p82sinfinitesteps(7);}@keyframesp8{100%{background-size:100%115%}}调整linear-gradient绘制的角度，加上mask。9.水柱加载.progress-9{--r1:154%;--r2：68.5%；宽度：60px；高度：60px；边界半径：50%；背景：径向渐变（var（--r1）var（--r2）在顶部，#000079.5％，#269af280％）居左，径向渐变（var（--r1）var（--r2）在底部，#269af279.5%，#000080%）中心中心，径向梯度（var（--r1）var（--r2）在顶部，#000079.5%，#269af280%）中心右，#ccc;背景大小：50.5%220%；背景位置：-100%0%，0%0%，100%0%；背景重复：不重复；动画：p92s无限线性；}@keyframesp9{33%{background-position:0%33%,100%33%,200%33%}66%{background-position:-100%66%,0%66%,100%66%}100%{background-position:0%100%,100%100%,200%100%}}radial-gradient绘制水平面的起伏，就三个圆圈。var(--r1)直接调用定义的属性值。技能获取...10.信号加载.progress-10{width:120px;高度：60px；边框半径：200px200px00；-webkit-mask:repeating-radial-gradient(farthest-sideatbottom,#00000,#0001px12%,#0000calc(12%+1px)20%);背景：径向渐变（底部最远侧，#514b82095%，#00000）底部/0%0%无重复#ddd；animation:p102sinfinitesteps(6);}@keyframesp10{100%{background-size:120%120%}}withrepeating-radial-gradient方法绘制圆形遮罩。radial-gradient从下往上的圆形渐变填充。呵呵，看了那么多花式操作，学会废人了吗？

上一篇：Redis为什么这么快——从数据存储的角度看

下一篇：物联网：5G最重要的应用

纯CSS实现十个相当不错的加载效果相关文章

最新推荐

猜你喜欢