炫光技巧代码实现

上代码：

一、html 模块

<div
      className={`${prefixName}-container`}
      style={{
        ...style,
        width,
        height,
      }}
    >
<div className={`${prefixName}-data-wrap`}>
    <div className={`${prefixName}-title-wrap`}>
      <div
        className={`${prefixName}-title`}
        style={{
          ...theme.typography.h3,
          color: theme.colors.gray50,
          lineHeight: '65px',
        }}
      >
        {title}
      </div>
    </div>
    <div className={`${prefixName}-total`} >
      {data}
    </div>
  </div>
</div>

二、css 模块

@{prefix}-container {
  position: relative;
  flex: 1;
  overflow: hidden;
  background-image: url('../assets/other_datashow_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: breathe 3s linear infinite;

  @{prefix}-data-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @{prefix}-title-wrap {
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 156px;
    height: 65px;
    background-image: url('./assets/rectangle.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    @{prefix}-title {
      text-align: center;
    }
  }

  @{prefix}-total {
    margin-top: 12px;
    text-align: center;
  }
}

@{prefix}-title-wrap:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 156px;
  height: 65px;
  content: '';
  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.15) 50%, transparent 60%);
  background-size: 300% 100%;
  animation: shine 15s linear infinite;
}

@keyframes shine {
  0% {
    background-position-x: 400%;
  }

  50% {
    background-position-x: 0%;
  }

  100% {
    background-position-x: -400%;
  }
}

@keyframes breathe {
  0% {
    opacity: 1;
  }

  50% {
    filter: brightness(150%) saturate(140%);
  }

  100% {
    opacity: 1;
  }
}