通用骨架屏效果开发

通用骨架屏效果开发，拿走不谢

---

请看示例：

---

我们都知道一个完美的APP、小程序、H5怎能没有一个优雅的骨架屏呢，下面我将使用CSS动画方式实现骨架屏。

---

一、CSS中的 animation

在项目中使用动画，只需要做两件事！

1、创建动画。

首先我们要了解 @keyframes是干什么的；
@keyframes动画是一组关键帧，它们存储在css中；

// 关键字“ @keyframes”指示动画本身
// css命名 skeleton-animation
@keyframes skeleton-animation {
  0% {
   opacity: .5;
  }
  100% {
    opacity: .1;
  }
}

花括号{ }包含关键帧列表；
它是开始帧0％和结束帧100％；
开始和结束帧也可以写为关键字“ from ”和“ to”；

在这里插入代码片
@keyframes skeleton-animation {
    from {
      opacity: 1;
    }
    30% {
      opacity: .5;
    }
    to {
       opacity: 1;
    }
}

2、设置动画的元素，指向所需的功能中

将上面的动画指向元素中使用：
这里的 ease-in-out infinite 等其他元素可参考 下面：
animation更多动画属性设置可参考 下面：

【传送门：菜鸟教程】

// 在这里插入代码片
.center {
    animation: skeleton-animation 2s ease-in-out infinite;
  }

在使用 animation 我们也可以使用 贝塞尔曲线 cubic-bezier属性

// 贝塞尔曲线 `cubic-bezier`属性
`animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);`

二、实现方法

最后献上代码如下（示例）：
骨架图展示的同时也可以展示loading，效果跟丝滑！

// 骨架屏显示图片
<div class="skeleton">
	<img src="xxxxx" /> 
</div>

<style lang="less" scoped>
.skeleton{
    animation: skeleton-animation 2s ease-in-out infinite;
    @keyframes backOpacity {
      0% {
        opacity: 1;
      }
      25% {
        opacity: .5;
      }
      50% {
        opacity: 1;
      }
      75% {
        opacity: .5;
      }
      to {
        opacity: 1;
      }
    }
  }
</style >

---

总结

提示：以上是通过css + img方式实现，小程序也可以生成自己的骨架屏，方法很多，以上仅供参考！

前端路上 | 所知甚少，唯善学。
各位小伙伴有什么疑问，欢迎留言探讨。

— 关注我：前端路上不迷路 —