仿 OriginOS 无清理项动画

拼搏现实的明天。 2024-05-24 04:18 49阅读 0赞

## 仿 Vivo OriginOS 无清理项动画 ##

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

### HTML ###

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

[127dcbef4ce143b9998555d5b2edee24.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/1060bcd0d78b4fcbae71bccbccec070c.gif