日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

仿 OriginOS 無清理項動畫

作者：庇耳拉海萊 更新時間： 2022-07-13 編程語言

仿 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;
  }
}

原文鏈接：https://blog.csdn.net/broken_promise/article/details/124536738

欄目分類
最近更新