common.scss 2.5 KB
/* 多行行文本溢出出现省略号 */
.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.clamp.clamp-a {
  -webkit-line-clamp: 1;
}

.clamp.clamp-b {
  -webkit-line-clamp: 2;
}

.clamp.clamp-c {
  -webkit-line-clamp: 3;
}

/*  开启硬件加速	*/
.threeD {
  transform: translateZ(0);
}

.anim {
  transition: all 0.4s;
}

@keyframes turn {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes flicker {
  0% {
    transform: scale(1); /*开始为原始大小*/
  }
  25% {
    transform: scale(1.1); /*放大1.1倍*/
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
}
.flicker {
  animation: flicker 2s infinite;
}

@keyframes spin {
  to {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(-360deg);
  }
}

.spin {
  animation: spin 1s infinite;
  animation-fill-mode: forwards;
}

.turn {
  animation: turn 1s infinite;
  animation-fill-mode: forwards;
}

.transform90 {
  transform: rotate(90deg);
}

.pos-rel {
  position: relative;
}

.pos-abs {
  position: absolute;
}

.text-l {
  text-align: left !important;
}

.text-r {
  text-align: right !important;
}

.text-c {
  text-align: center !important;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clear:after {
  display: block;
  content: '.';
  clear: both;
  visibility: hidden;
  overflow: hidden;
  width: 100%;
  height: 0;
}

.clear {
  clear: both;
}

.flex {
  display: flex;
}
.al-i-c {
  align-items: center;
}
.ju-c-sb {
  justify-content: space-between;
}
.ju-c-sa {
  justify-content: space-around;
}
.ju-c-c {
  justify-content: center;
}
.ju-c-end {
  justify-content: flex-end;
}
@for $i from 1 through 50 {
  .p-#{$i} {
    padding: (1px * $i) !important;
  }
  .p-t-#{$i} {
    padding-top: (1px * $i) !important;
  }
  .p-r-#{$i} {
    padding-right: (1px * $i) !important;
  }
  .p-b-#{$i} {
    padding-bottom: (1px * $i) !important;
  }
  .p-l-#{$i} {
    padding-left: (1px * $i) !important;
  }
  .m-#{$i} {
    margin: (1px * $i) !important;
  }
  .m-t-#{$i} {
    margin-top: (1px * $i) !important;
  }
  .m-r-#{$i} {
    margin-right: (1px * $i) !important;
  }
  .m-b-#{$i} {
    margin-bottom: (1px * $i) !important;
  }
  .m-l-#{$i} {
    margin-left: (1px * $i) !important;
  }
  .fz-#{$i} {
    font-size: (1px * $i) !important;
  }
}

.text-line-thr {
  text-decoration: line-through !important;
}