锁定解锁 CSS 动画

爱被打了一巴掌 2023-10-14 14:31 82阅读 0赞

锁定解锁 CSS 动画

![在这里插入图片描述][6c1445f60b054490956c8b1ff56bbe25.gif_pic_center]

HTML 代码

CSS代码

.btn-lock {
        
      position: absolute;
      top: calc(50% - 32px);
      left: calc(50% - 32px);
      display: inline-block;
      background: #ff5b5b;
      width: 64px;
      height: 64px;
      box-sizing: border-box;
      padding: 12px 0 0 18px;
      border-radius: 50%;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    
    .btn-lock svg {
        
      fill: none;
      transform: translate3d(0, 0, 0);
    }
    
    .btn-lock svg .bling {
        
      stroke: #fff;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 3;
      stroke-dashoffset: 15;
      transition: all 0.3s ease;
    }
    
    .btn-lock svg .lock {
        
      stroke: #fff;
      stroke-width: 4;
      stroke-linejoin: round;
      stroke-linecap: round;
      stroke-dasharray: 36;
      transition: all 0.4s ease;
    }
    
    .btn-lock svg .lockb {
        
      fill: #fff;
      fill-rule: evenodd;
      clip-rule: evenodd;
      transform: rotate(8deg);
      transform-origin: 14px 20px;
      transition: all 0.2s ease;
    }
    
    #inpLock {
        
      display: none;
    }
    
    #inpLock:checked + label {
        
      background: #20cca5;
    }
    
    #inpLock:checked + label svg {
        
      opacity: 1;
    }
    
    #inpLock:checked + label svg .bling {
        
      animation: bling6132 0.3s linear forwards;
      animation-delay: 0.2s;
    }
    
    #inpLock:checked + label svg .lock {
        
      stroke-dasharray: 48;
      animation: locked 0.3s linear forwards;
    }
    
    #inpLock:checked + label svg .lockb {
        
      transform: rotate(0);
      transform-origin: 14px 22px;
    }
    
    @keyframes bling6132 {
        
      50% {
        
        stroke-dasharray: 3;
        stroke-dashoffset: 12;
      }
    
      100% {
        
        stroke-dasharray: 3;
        stroke-dashoffset: 9;
      }
    }
    
    @keyframes locked {
        
      50% {
        
        transform: translateY(1px);
      }
    }

### 感谢您的阅读❤️！ ###

[6c1445f60b054490956c8b1ff56bbe25.gif_pic_center]: https://img-blog.csdnimg.cn/6c1445f60b054490956c8b1ff56bbe25.gif#pic_center