# CSS 样式库

# 1. 单行文本溢出显示省略号

示例：

.text-in-one-line {
  white-space: nowrap;      /* 表示文本不换行。 */
  overflow: hidden;         /* 表示超出容器的内容将被隐藏。 */
  text-overflow: ellipsis;  /* 表示当文本内容超出所在容器的宽度时，用省略号来代替超出的部分。 */
}

参考：

CSS中的text-overflow属性详解（控制文字在一行显示，超出部分加省略号） (opens new window)

# 2. 多行文本溢出显示省略号

示例：

.text-2 { 
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 2;  /* 最多显示两行 */
  overflow: hidden; 
  text-overflow: ellipsis; 
}

参考：

How to Apply an Ellipsis to Multiline Text in CSS ? (opens new window)

# 3. 多个背景图

说明：

图层叠加顺序：前面的覆盖后面的

示例：

.box {
  background-image:
    url(./images/card-blue/vector_3.png),
    url(./images/card-blue/vector_2.png),
    url(./images/card-blue/vector_1.png);

  background-position:
    0 255px,
    0 145px,
    0 289px;

  background-color: #5CAFFF;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

# 4. 快速置灰

说明：

通过滤镜将图片及元素变成黑白的

示例：

.disabled {
  filter: grayscale(100%);
  opacity: 0.5; /* 加透明度 会更不明显 */
}

# 5. 行军蚂蚁

说明：

蚂蚁线

示例：

SCSS

// $ant-size 两节短线的总长度
// $ant-width 一节短线的宽度
// $speed 运动一圈的时间
// $keyframe-id 帧动画 id
@mixin marching-ants-init($ant-size, $ant-width, $speed, $keyframe-id){
  background-size:
    $ant-size $ant-width,
    $ant-size $ant-width,
    $ant-width $ant-size,
    $ant-width $ant-size;
  background-position:
    0 0,
    0 100%,
    0 0,
    100% 0;
  background-repeat:
    repeat-x,
    repeat-x,
    repeat-y,
    repeat-y;
  animation: marching-ants-#{$keyframe-id} $speed;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;

  &:hover,
  &.marching {
    animation-play-state: running;
  }

  &.reverse {
    animation-direction: reverse;
  }
};

// $color1 第一节线的颜色
// $color2 第二节线的颜色
@mixin marching-ants-color($color1, $color2){
  background-image:
    linear-gradient(to right, $color1 50%, $color2 50%),
    linear-gradient(to right, $color1 50%, $color2 50%),
    linear-gradient(to bottom, $color1 50%, $color2 50%),
    linear-gradient(to bottom, $color1 50%, $color2 50%);
};

// $ant-size 两节短线的总长度
@mixin marching-ants-animation($ant-size, $keyframe-id){
  @keyframes marching-ants-#{$keyframe-id} {
    0% {
      background-position:
        0 0,
        0 100%,
        0 0,
        100% 0;
    }
    100% {
      background-position:
        2*$ant-size 0,
        -2*$ant-size 100%,
        0 -2*$ant-size,
        100% 2*$ant-size;
    }
  }
}

@include marching-ants-animation(10px, 1);

.marching-ants {
  @include marching-ants-init(10px, 1px, 1s, 1);
  @include marching-ants-color(#dd2, transparent);
}

CSS

@keyframes marching-ants-1 {
  0% {
    background-position: 0 0, 0 100%, 0 0, 100% 0;
  }
  100% {
    background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px;
  }
}
.marching-ants {
  background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  animation: marching-ants-1 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  background-image: linear-gradient(to right, #dd2 50%, transparent 50%), linear-gradient(to right, #dd2 50%, transparent 50%), linear-gradient(to bottom, #dd2 50%, transparent 50%), linear-gradient(to bottom, #dd2 50%, transparent 50%);
}
.marching-ants:hover, .marching-ants.marching {
  animation-play-state: running;
}
.marching-ants.reverse {
  animation-direction: reverse;
}

参考：

pure CSS marching ants border (opens new window)

# 6. flex 多行布局

说明：

水平排列，溢出换行

示例：

.list {
  display: flex;
  align-items: flex-start;   /* 行内的元素，垂直方向的排列，从上往下排 */
  
  flex-flow: wrap;           /* 溢出换行 */
  align-content: flex-start; /* 行，垂直方向的排列，从上往下排 */
}

.item {
  width: 100px;
  height: 100px;
}

本章目录