press-pix/popup-get-award-shell/css/index.less

基于 PixUI 的 Press 组件库

// 透明度淡入动画
@keyframes opacityFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.popup-get-award-shell {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 99;
  background: rgb(9, 15, 27, .9);

  .popup-get-award-inner {
    width: 13rem;
    height: 7.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    .frame-animation {
      position: absolute;
      width: 16.6rem;
      height: 10.8rem;
      z-index: 1;
    }
  }

  .popup-title {
    width: 4.76rem;
    height: 1.36rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: .35rem;
    animation: opacityFadeIn .8s ease-in-out .2s forwards;
    opacity: 0;
    z-index: 2;

    .popup-title-img {
      width: 2.56rem;
      height: .58rem;
      background-image: url('https://image-1251917893.file.myqcloud.com/Esports/pix/img/record/gxhd-text.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .popup-content {
    width: 100%;
    height: 4.04rem;
    position: absolute;
    top: 1.71rem;
    animation: opacityFadeIn .8s ease-in-out .2s forwards;
    opacity: 0;
    z-index: 2;
  }

  .popup-button-wrapper {
    position: absolute;
    top: 6rem;
    z-index: 2;
    animation: opacityFadeIn .8s ease-in-out .2s forwards;
    opacity: 0;
  }
}