前端开发者必备的 CSS 技巧与最佳实践

发表于 更新于 分类于 阅读次数：

一行代码实现复杂设计和移除图片背景的方法

1
mix-blend-mode: multiply;

17 行代码实现骨架屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
*[loading='true'] > div:not([loading='true']) {
  background-image: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 37%, #f0f2f5 63%) !important;
  background-size: 400% 100% !important;
  animation: skeleton-loading 1.4s infinite ease !important;
  border: none !important;
  min-height: 30px;
}
*[loading='true'] > div:not([loading='true']) > * {
  display: none !important;
}
@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

[loading='true']此选择器（attribute 选择器）选择了 全部含有 loading 属性且值为 true 的元素，如

<div loading='true'></div>

div:not([loading='true'])此选择器（非选择器）选择了子元素中所有 loading 为 true 的元素，这主要是为了让骨架屏更有层级感：这样它会回到第一个选择器生效（*[loading=’true’]），在子元素上写 loading=’true’ 时会将子元素的子元素精细化的展示出来！