CSS学习(二)——制作加载动画

最新推荐文章于 2022-11-06 17:57:29 发布

cRack_cLick

最新推荐文章于 2022-11-06 17:57:29 发布

阅读量204

点赞数

分类专栏： css学习文章标签： css css3

本文链接：https://blog.csdn.net/SkelleBest/article/details/112137079

版权

css学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果如下：

学习制作关键帧动画，本内容需要注意的地方：

var声明自定义属性名称，点我查看文档

calc动态计算属性，点我查看文档

源码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="loader">
      <div style="--x: 0"></div>
      <div style="--x: 1"></div>
      <div style="--x: 2"></div>
      <div style="--x: 3"></div>
      <div style="--x: 4"></div>
    </div>
  </body>
</html>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #edf1f4;
    min-height: 100vh;
  }
  .loader {
    display: flex;
    flex-direction: row;
  }
  .loader div {
    overflow: hidden;
    position: relative;
    width: 40px;
    height: 200px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #edf1f4);
    margin: 20px;
    border-radius: 50px;
    border: 2px solid #edf1f4;
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 20px #fff,
      inset -5px -5px 5px rgba(255, 255, 255, 0.5),
      inset 5px 5px 5px rgba(0, 0, 0, 0.5);
  }

  .loader div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    border-radius: 50px;
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 20px #fff,
      inset -5px -5px 5px rgba(255, 255, 255, 0.5),
      inset 5px 5px 5px rgba(0, 0, 0, 0.5);
  }
  .loader div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.1), 0 420px 0 400px #2196f3;
    animation: animate 2.5s ease-in-out infinite;
    animation-delay: calc(var(--x) * 0.3s);
    transform: translateY(160px);
  }

  @keyframes animate {
    0% {
      transform: translateY(160px);
      filter: hue-rotate(0deg);
    }
    50% {
      transform: translateY(0px);
      filter: hue-rotate(180deg);
    }
    100% {
      transform: translateY(160px);
      filter: hue-rotate(360deg);
    }
  }
</style>

cRack_cLick

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习(二)——制作加载动画

效果如下：学习制作关键帧动画，本内容需要注意的地方：var声明自定义属性名称，点我查看文档calc动态计算属性，点我查看文档源码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0".
复制链接

扫一扫