仿 OriginOS 无清理项动画

最新推荐文章于 2025-01-11 14:45:33 发布

庇耳拉海莱

最新推荐文章于 2025-01-11 14:45:33 发布

阅读量644

点赞数

分类专栏： css动效文章标签：动画 css3 css

本文链接：https://blog.csdn.net/broken_promise/article/details/124536738

版权

css动效专栏收录该内容

11 篇文章

订阅专栏

仿 Vivo OriginOS 无清理项动画

因为我自己的手机是 vivo 品牌, 其中的一些动画挺有意思的, 就像模仿看看. 先看效果
请添加图片描述

HTML

<body>
  <div class="container flex">
    <div class="flex wrapper">
      <div class="icons">
        <div class="bar upper"></div>
        <div class="ball"></div>
        <div class="bar lower"></div>
      </div>
      <div class="tips">无清理项</div>
    </div>
  </div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: monospace, sans-serif;
  font-weight: bold;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  height: 100vh;
  background-color: #fff;;
}
.wrapper {
  flex-direction: column;
}
.icons {
  height: 2rem;
  position: relative;
}
.bar {
  width: 2em;
  height: 3px;
}
.upper {
  background-color: rgb(0, 0, 0);
  transform: translateY(calc( 1em - 50% ));
  animation: upper-move .5s linear forwards;
  animation-delay: .5s;
}
.lower {
  background-color: rgb(219, 219, 219);
  animation: lower-move 1s linear forwards;
}
.ball {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background-color: rgb(23, 194, 158);
  animation: ball-move 1s linear forwards;
  animation-delay: 1s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -5px;
  opacity: 0;
}
.tips {
  margin-top: 1em;
  color: rgb(175, 175, 175);
  font-family: 黑体;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

@keyframes upper-move {
  to {
    transform: translateY(calc( (2em - 100%)));
  }
}

@keyframes lower-move {
  from {
    transform: translateX(-100%) translateY(calc( 1em - 150% ));
  }
  50% {
    transform: translateX(0) translateY(calc( 1em - 150% ));;
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes ball-move {
  from {
    right: -5px;
  }
  33% {
    right: calc(100% + 5px);
  }
  66% {
    right: -5px;
  }
  to {
    right: 5px;
    opacity: 1;
  }
}