让登录菜单动起来登录菜单样式优化

最新推荐文章于 2024-09-12 19:55:46 发布

huoyueyi

最新推荐文章于 2024-09-12 19:55:46 发布

阅读量238

点赞数 1

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/Kyrie_mvp/article/details/142142696

版权

需实现的效果 : 让登录框外侧出现滚动条且一直滚动 + 登录框有划入效果 + 划入登录按钮有光条效果（光条效果还是应用很频繁的~）

划入效果如下

一直滚动和光条效果如下

实现代码

  @keyframes slideInRightToLeft {
    0% {
      transform: translateX(100%);
      /* Start from the right */
      opacity: 0;
      /* Optionally, fade in as it moves */
    }

    100% {
      transform: translateX(0);
      /* Move to the left */
      opacity: 1;
      /* Fully visible */
    }
  }

 animation: slideInRightToLeft 1s ease-in-out;  // 划入效果


// 一直滚动的跑马灯特效

  @keyframes clipm {
      0% {
        clip: rect(0px, 520px, 2px, 0px);
      }

      25% {
        clip: rect(0px, 2px, 480px, 0px);
      }

      50% {
        clip: rect(450px, 520px, 520px, 0px);
      }

      75% {
        clip: rect(0px, 520px, 480px, 480px);
      }

      100% {
        clip: rect(0px, 520px, 2px, 0px);
      }
  }

  /* 跑马灯特效 */
  .login-content::before,
  .login-content::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
  }

  //  跑马灯特效的位置
  .login-content::before,
  .login-content::after {
    content: '';
    // margin: -1.6%;
    box-shadow: inset 0 0 0 2px;
    animation: clipm 8s linear infinite;
    color: var(--main-bg);
  }

  .login-content::before {
    animation-delay: -4s; // 取消以后跑马灯变成单方面跑动
  }


// 登录按钮亮色条闪过
ant-btn-primary{
     z-index: 1;
      overflow: hidden;
}

// 登录按钮亮色条闪过
    .ant-btn-primary::after {
      content: '';
      z-index: -1;
      background-color: hsla(0, 0%, 100%, 0.2);
      position: absolute;
      top: -50%;
      bottom: -50%;
      width: 1.25em;
      transform: translate3d(-1646%, 0, 0) rotate(35deg);
    }
// 登录按钮亮色条闪过
    .ant-btn-primary:hover::after {
      transition: transform 0.45s ease-in-out;
      transform: translate3d(1646%, 0, 0) rotate(35deg);
    }