hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 前端开发 - 正文 君子好学,自强不息!

使用 CSS 实现骨架屏_WEB前端开发

2020-06-18前端开发ki4网8°c
A+ A-

js怎么获取网站的url_WEB前端开发

js获取网站的url的方法是:1、使用【document.documentURI;】来获取网站的url;2、使用【document.URL;】来获取网站的url。

前言

在加载网络数据时,为了提升用户体验,通常会使用一个转圈圈的loading动画,或者使用Skeleton Screen占位。相比与loading动画,Skeleton Screen的效果要更生动,实现起来来也很简单。利用CSS就可以实现一个简单的Skeleton Screen。

思路

  • HTML搭建骨架

  • CSS加样式

  • CSS加动画

从搭建骨架开始

骨架结构很简单,只是随意的放几个你喜欢的块级元素就ok了。

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

你看,就是这样简简单单。

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%)

让它动起来

剩下要做的就是让中间的绿色动起来

JS内置对象 Math 和 Date 的详解_WEB前端开发

JS内置对象Math与Date Math 对象Math是 JavaScript 的原生对象,提供各种数学功能。

你可以想一下有什么办法让它动?

这里用到的是,通过拉伸背景图片,动态设置背景定位百分比,改变背景定位,从而计算得到图片相对容器的不同偏移值,以此实现了动画的效果。

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属性设置了两个值,第一个值代表水平位置相对容器的偏移,第二个代表垂直位置相对容器的偏移。

使用百分比设置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的变化的过程。

推荐教程:《PHP》《CSS教程》

以上就是使用 CSS 实现骨架屏的详细内容,更多请关注ki4网其它相关文章!

分享十个实用的单行 JS 代码_WEB前端开发

单行代码极难维护(有时甚至很难理解),但这都无法阻止它们非常酷。完成编写一个极简解决方案后,你一定会很满足的。 这有一些我最近心爱的收藏。它们都可以直接在你的开放控制台中运行,来试试吧。

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
使用 CSS 实现骨架屏_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>