常用样式 | howcode

# 多行文本溢出显示省略

.row_2_ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; //超过N行溢出显示省略号
  -webkit-box-orient: vertical;
}

1
2
3
4
5
6
7

# 自定义滚动条

.scroll_container {
  overflow: auto;
}

.scroll_container::-webkit-scrollbar {
  width: 8px;
  background: white;
}

.scroll_container::-webkit-scrollbar-corner,
/* 滚动条角落 */
.scroll_container::-webkit-scrollbar-thumb,
.scroll_container::-webkit-scrollbar-track {
  border-radius: 4px;
}

.scroll_container::-webkit-scrollbar-corner,
.scroll_container::-webkit-scrollbar-track {
  /* 滚动条轨道 */
  background-color: rgba(180, 160, 120, 0.1);
  box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
}

.scroll_container::-webkit-scrollbar-thumb {
  /* 滚动条手柄 */
  background-color: rgba(0, 0, 0, .4);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

记得添加上高度限制

# 生成小于12px文字

<svg width="195.625" height="11.52">
  <text
    dominant-baseline="baseline"
    font-size="10"
    y="9.52"
    style="line-height: 1; vertical-align: middle;"
  >
    千山鸟飞绝 - from hill to hill no bird in flight
  </text>
</svg>

1
2
3
4
5
6
7
8
9
10

提示：使用 svg 作为解决小于 12px 字号文字的方案：

使用 transform: scale() 设置后占位区域并没有改变，难以调节对齐方式。
使用 canvas 无法选中文字（也可以解决，但不如 svg 简洁）

# 三角形

<div class="triangle"></div>

等边

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 65px 112.6px 65px;
  border-color: transparent transparent #00adb5 transparent;
}

1
2
3
4
5
6
7

等腰

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 65px 100px 65px;
  border-color: transparent transparent #00adb5 transparent;
}

1
2
3
4
5
6
7

# 波浪案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      background: #2189f6;
    }

    .content {
      height: 65vh;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .waves {
      position: relative;
      width: 100%;
      height: 15vh;
      margin-bottom: -7px;
      /* 修复 Safari 等浏览器下方空隙 */
      min-height: 100px;
      max-height: 150px;
    }

    .parallax>use {
      animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    }

    .parallax>use:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 7s;
    }

    .parallax>use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
    }

    .parallax>use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
    }

    .parallax>use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
    }

    @keyframes move-forever {
      0% {
        transform: translate3d(-90px, 0, 0);
      }

      100% {
        transform: translate3d(85px, 0, 0);
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="content">
    </div>

    <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
      <defs>
        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
      </defs>
      <g class="parallax">
        <use xlink:href="#gentle-wave" x="28" y="0" fill="rgba(255,255,255,0.7" />
        <use xlink:href="#gentle-wave" x="28" y="3" fill="rgba(255,255,255,0.5)" />
        <use xlink:href="#gentle-wave" x="28" y="5" fill="rgba(255,255,255,0.3)" />
        <use xlink:href="#gentle-wave" x="28" y="7" fill="#fff" />
      </g>
    </svg>
  </div>
  </script>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

——暂无评论——