transform动画字体引入

.card-img {
        transform: scale(1.2);
        -ms-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2); /* Firefox */
        -o-transform: scale(1.2); /* Opera */
      }

.centerCircle {
     transform: rotate(180deg) translate3d(0,0,0) scale(1, 1);
 }

  

@font-face {
  font-family: "DS-DIGIB-2"; // 方块字
  src: url(~@/assets/fonts/DS-DIGIB-2.ttf);
}

@font-face {
  font-family: "TITLE-TOP"; // 标题
  src: url(~@/assets/fonts/PangMenZhengDaoBiaoTiTi-1.ttf);
}
animation: colorChange 0.3s ease-in-out infinite;
animation: turn 3s linear infinite;
@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes colorChange {
      from {
        opacity: 1;
      }

      to {
        opacity: 0.3;
      }
    }

  

posted @ 2022-06-23 10:47  小拐  阅读(59)  评论(0)    收藏  举报