仿Windows10条形加载动画

最新推荐文章于 2024-07-22 17:39:49 发布

我是LJL啦

最新推荐文章于 2024-07-22 17:39:49 发布

阅读量507

点赞数

分类专栏： Java普通代码文章标签：动画 css3 html5 前端

本文链接：https://blog.csdn.net/a825245794/article/details/122326383

版权

Java普通代码专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何修改Windows10的条形加载动画，使其能够在div元素内部正常显示，而不是占据整个屏幕。通过CSS关键帧动画@keyframes和预加载类preloadspan的设置，实现了动画在指定区域内的平滑过渡和淡入淡出效果，同时详细说明了各个部分的代码作用和延迟时间。

摘要由CSDN通过智能技术生成

此次针对网上已有的Windows10条形加载动画进行修改，使其可以在div里进行，而不占用全屏

CSS


@keyframes loader {
  1% {
    position: relative;
    display: inherit;
    left: 20%;
    opacity: 1;
  }

  60% {
    position: relative;
    display: inherit;
    left: 80%;
    opacity: 1;
  }

  61% {
    position: relative;
    display: inherit;
    opacity: 0;
  }
}


.preload {
  width: 100%;
  height: 20px;
  position: relative;
  display: flex;
  flex-direction:row;
  transition: opacity .2s;
}

.preload span {
  position: fixed;
  display: inline;
  height: 10px;
  width: 10px;
  background: #0078D7;
  z-index: 100;
  margin: 0 2px;
  border-radius: 100%;
  animation: loader 5s infinite cubic-bezier(0.030, 0.615, 0.995, 0.415);
  transform: translate(-50%,-50%);
  opacity: 0;
}

.preload span:nth-child(1) {
  animation-delay: 0.5s;
}

.preload span:nth-child(2) {
  animation-delay: 0.4s;
}

.preload span:nth-child(3) {
  animation-delay: 0.3s;
}

.preload span:nth-child(4) {
  animation-delay: 0.2s;
}

.preload span:nth-child(5) {
  animation-delay: 0.1s;
}

.preload span:nth-child(6) {
  animation-delay: 0s;
}

HTML

 <div class="preload">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>