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 。
@keyframes定义了一个具有两种状态的动画，其中元素更改opacity并使用transform: translateY()在2D平面上进行transform: translateY()。.bouncing-loader是弹跳圆圈的父容器，使用display: flex和justify-content: center将它们放置在中心位置。.bouncing-loader > div，将父级的三个子div作为样式。div的宽度和高度为1rem，使用border-radius: 50%将它们从正方形变成圆形。margin: 3rem 0.2rem指定每个圆的上边距/下边距为3rem和左/右边距0.2rem以便它们不直接接触对方，给它们一些呼吸空间。animation是各种动画属性的缩写属性：使用animation-name，animation-duration，animation-iteration-count，animation-direction。nth-child(n)目标是其父元素的第n个子元素。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 {
}说明
::-webkit-scrollbar定位整个滚动条元素。::-webkit-scrollbar-track仅针对滚动条轨道。::-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: 100%;
height: 100%;
position: absolute;
background: inherit;
top: 0.5rem;
filter: blur(0.4rem);
opacity: 0.7;
z-index: -1;
}说明
代码片段需要一些复杂的情况来正确堆叠上下文，这样伪元素将定位在元素本身的下面，同时仍然可见。
position: relative在父元素上为子元素建立笛卡尔定位上下文。z-index: 1建立新的堆叠内容。position: relative在子级上建立伪元素的定位上下文。::after定义伪元素。position: absolute从文档流中取出伪元素，并将其相对于父元素定位。width: 100%和height: 100%调整伪元素的大小以填充其父元素的尺寸，使其大小相等。background: inherit使伪元素继承在元素上指定的线性渐变。top: 0.5rem将伪元素从其父元素稍微向下偏移。filter: blur(0.4rem)将模糊伪元素以在下面创建阴影的外观。opacity: 0.7使伪元素部分透明。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;
}
}说明
box-shadow，当仅使用扩展时，添加可以使用子像素*的伪边框。- 使用
@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: 100%;
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;
}说明
display: inline-block使块pp成为 一inline-block以防止下划线跨越整个父级宽度而不仅仅是内容(文本)。position: relative在元素上为伪元素建立笛卡尔定位上下文。::after定义伪元素。position: absolute从文档流中取出伪元素，并将其相对于父元素定位。width: 100%确保伪元素跨越文本块的整个宽度。transform: scaleX(0)最初将伪元素缩放为0，使其没有宽度且不可见。bottom: 0和left: 0将其放置在块的左下方。transition: transform 0.25s ease-out意味着transform变化将通过ease-out时间功能在0.25秒内过渡。transform-origin: bottom right表示变换锚点位于块的右下方。:hover::after然后使用scaleX(1)将宽度转换为100％，然后将transform-origin更改为bottom left以便定位点反转，从而允许其在悬停时转换到另一个方向。
