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;
}
}
请阅读后点赞,谢谢