30 seconds of css是跟30 seconds of code 类似的项目，翻译中文版已经很久了，今天列举几个自己觉得比较有用的片段，使用CSS3实现某些前端效果，还是挺炫酷的。

CSS加载中的动画

HTML

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

@keyframes bouncing-loader {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0.1;
    transform: translateY(-1rem);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

说明

注:1rem 通常是16px 。

1. @keyframes定义了一个具有两种状态的动画，其中元素更改opacity并使用transform: translateY()在2D平面上进行transform: translateY() 。
2. .bouncing-loader是弹跳圆圈的父容器，使用display: flex和justify-content: center将它们放置在中心位置。
3. .bouncing-loader > div ，将父级的三个子div作为样式。 div的宽度和高度为1rem ，使用border-radius: 50%将它们从正方形变成圆形。
4. margin: 3rem 0.2rem 指定每个圆的上边距/下边距为3rem 和左/右边距0.2rem 以便它们不直接接触对方，给它们一些呼吸空间。
5. animation是各种动画属性的缩写属性：使用animation-name ， animation-duration ， animation-iteration-count ， animation-direction 。
6. nth-child(n)目标是其父元素的第n个子元素。
7. animation-delay分别用于第二个和第三个div ，以便每个元素不会同时启动动画。

演示

自定义滚动条

在WebKit平台上自定义具有可滚动溢出的文档和元素的滚动条样式。

HTML

<div class="custom-scrollbar">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
</div>

CSS

/* Document scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}

说明

1. ::-webkit-scrollbar 定位整个滚动条元素。
2. ::-webkit-scrollbar-track 仅针对滚动条轨道。
3. ::-webkit-scrollbar-thumb 瞄准滚动条拇指。

还有许多其他的伪元素可以用来设置滚动条的样式。有关详细信息，请访问网络博客 演示

自定义文本选择

更改文本选择的样式。

HTML

<p class="custom-text-selection">Select some of this text.</p>

CSS

::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

说明

::selection 定义元素上的伪选择器，以便在选定元素时设置其中文本的样式。请注意，如果不组合任何其他选择器，则样式将在文档根级别应用于任何可选元素。 演示

动态阴影

创建与类似的阴影box-shadow 而是基于元素本身的颜色。

HTML

<div class="dynamic-shadow-parent">
  <div class="dynamic-shadow"></div>
</div>

CSS

.dynamic-shadow-parent {
  position: relative;
  z-index: 1;
}
.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
}
.dynamic-shadow::after {
  content: '';
  width: ;
  height: ;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

说明

代码片段需要一些复杂的情况来正确堆叠上下文，这样伪元素将定位在元素本身的下面，同时仍然可见。

1. position: relative 在父元素上为子元素建立笛卡尔定位上下文。
2. z-index: 1 建立新的堆叠内容。
3. position: relative 在子级上建立伪元素的定位上下文。
4. ::after 定义伪元素。
5. position: absolute 从文档流中取出伪元素，并将其相对于父元素定位。
6. width: 和height: 调整伪元素的大小以填充其父元素的尺寸，使其大小相等。
7. background: inherit 使伪元素继承在元素上指定的线性渐变。
8. top: 0.5rem 将伪元素从其父元素稍微向下偏移。
9. filter: blur(0.4rem) 将模糊伪元素以在下面创建阴影的外观。
10. opacity: 0.7 使伪元素部分透明。
11. z-index: -1 将伪元素定位在父元素后面。

演示

细线边框

为元素提供一个边框，宽度等于1个本地设备像素，可以显得非常清晰和清晰。

HTML

<div class="hairline-border">text</div>

CSS

.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}

说明

1. box-shadow ，当仅使用扩展时，添加可以使用子像素*的伪边框。
2. 使用@media (min-resolution: ...) 为了检查器件像素比(1dppx 等于96 DPI )，将box-shadow的分布设置为1 / dppx 。 。

演示

悬停下划线动画

当文本悬停在上面时创建动画下划线效果。 Credit: https://flatuicolors.com/

HTML

<p class="hover-underline-animation">Hover this text to see the effect!</p>

CSS

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: ;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

说明

1. display: inline-block 使块pp成为 一inline-block 以防止下划线跨越整个父级宽度而不仅仅是内容(文本)。
2. position: relative 在元素上为伪元素建立笛卡尔定位上下文。
3. ::after 定义伪元素。
4. position: absolute 从文档流中取出伪元素，并将其相对于父元素定位。
5. width: 确保伪元素跨越文本块的整个宽度。
6. transform: scaleX(0) 最初将伪元素缩放为0，使其没有宽度且不可见。
7. bottom: 0 和left: 0 将其放置在块的左下方。
8. transition: transform 0.25s ease-out 意味着transform 变化将通过ease-out 时间功能在0.25秒内过渡。
9. transform-origin: bottom right 表示变换锚点位于块的右下方。
10. :hover::after 然后使用scaleX(1) 将宽度转换为100％，然后将transform-origin 更改为bottom left 以便定位点反转，从而允许其在悬停时转换到另一个方向。

演示 完整版：http://caibaojian.com/30-seconds-of-css/