CSS完成Skelet✤on Screen框架屏实际效果

2021-03-23 19:48 jianzhan

在载入互联网数据信息时,以便提高客户感受,一般会应用一个转圈圈的loading动漫,或是应用Skeleton Screen占位性病变。对比与loading动漫,Skeleton Screen的实际效果要更栩栩如生,完成起來来也非常简单。运用CSS便可以完成一个简易的Skeleton Screen。

构思

  • HTML构建框架
  • CSS加款式
  • CSS加动漫

从构建框架刚开始

框架构造非常简单,仅仅随便的放好多个你喜爱的块级原素就ok了。

<div class='screen-root'>
  <ul>
    <li/>
    <li/>
    <li/>
  </ul>
</div>

你看看,便是那样简简易单。

CSS着色

大家常见到的框架屏是这一模样的

以便便捷叙述,提高比照,我能先做一个鬼畜版的

 

最先运用css的 linear-gradient 特性画一个红中带点绿的渐变色照片,并把它作为情况添充给 li

标识

linear-gradient()能够建立一个多种多样色调线形渐变色的照片,想想解大量能看这儿

li{
    background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%);
    width: 100%;
    height: 0.6rem;
    list-style: none;
}

具体应用里将渐变色图换为一切正常的色调,如: background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)

让它动一动

剩余要做的便是让正中间的翠绿色动一动

你可以以想一下有哪些方法让它动?

这儿采用的是,根据拉申情况照片,动态性设定情况精准定位百分数,更改情况精准定位,进而测算获得照片相对性器皿的不一样偏位值,为此完成了动漫的实际效果。

li{
    background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%);
    width: 100%;
    height: 0.6rem;
    list-style: none;
    background-size: 400% 100%;
    background-position: 100% 50%;
    animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

这儿给 background-position 特性设定了2个值,第一个值意味着水准部位相对性器皿的偏位,第二个意味着竖直部位相对性器皿的偏位。

应用百分数设定 background-position 值时,它会实行一个测算具体精准定位值公式计算 (container width - image width) * (position x%) = (x offset value) ,即器皿和照片的总宽差乘上设定的百分数精准定位值,获得的結果便是具体的偏位值,将 background-size 的总宽设定为400%的在其中一个目地便是,那样便会和器皿造成总宽差。

有同学们将会会问,将 background-size 值设成50%,还可以和器皿造成总宽差。是的,可是那样,情况照片会平铺全部器皿,你能欣喜的发觉,绿点变为了double。

你可以以尝试给background-size设定不一样的值,观查它的主要表现,并想一下为何会那样。

最终运用重要帧动漫,设定 background-position 在x座标的值从 100%0%

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

假定器皿的总宽是 100px ,那麼情况照片的总宽便是 400px ,运用上面的公式计算,第一帧的动漫中,情况图相对性器皿偏位的真正值是

(100px-400px)*100% = -300px

最终一帧具体偏位

(100px-400px)*0% = 0

动漫的全过程具体便是一个3倍器皿宽的线形情况照片相对性于器皿的偏位从 -300px0 的转变的全过程。

小结

到此这篇有关CSS完成Skeleton Screen(框架屏)的文章内容就详细介绍到这了,大量有关CSS完成Skeleton Screen 框架屏內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!