30-seconds-of-css

你可以再30秒或者更短的时间内读懂的有用的CSS代码片段的精选.

github地址不过代码不在github上面

官网地址上面有详细的介绍和演示

下面是我读到的一些个人认为比较实用的片段

1. 等宽高比

给定一个可变宽度的元素, 它确保其高度以响应的方式与宽度保持成比例, 即宽度与高度的比例保持一致.

<div class="constant-width-to-height-ratio"></div>

CSS代码

.constant-width-to-height-ratio {
  background: #333;
  width: 50%;
}
.constant-width-to-height-ratio::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.constant-width-to-height-ratio::after {
  content: '';
  display: block;
  clear: both;
}

2. 计数器

计数器本质上是由CSS维护的变量, 其值可以通过CSS规则递增以跟踪它们的使用次数

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

CSS代码

ul {
  counter-reset: counter;
}
li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}

效果

3. 自定义文本选择

更改文本选择的样式

<p>Sleect some of this text</p>
<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;
}

效果

4. 自定义变量

CSS变量, 其中包含要在整个文档中重用的值.

阮一峰老师关于css变量的介绍

张鑫旭老师关于CSS变量的介绍

<p class="custom-variables">CSS is awesome!</p>

CSS代码

:root {
  --some-color: #da7800;
  --some-keyword: italic;
  --some-size: 1.25em;
  --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
}
.custom-variables {
  color: var(--some-color);
  font-size: var(--some-size);
  font-style: var(--some-keyword);
  text-shadow: var(--some-complex-value);
}

5. 渐变文本

为文本提供渐变(IE无效)

<p class="gradient-text">Gradient text</p>

CSS代码

.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

6. 溢出滚动渐变

向溢出元素添加渐变以更好的提示用户有更多内容需要滚动

<div class="overflow-scroll-gradient">
  <div class="overflow-scroll-gradient__scroller">
    Content to be scrolled
  </div>
</div>

CSS代码

.overflow-scroll-gradient {
  position: relative;
}
.overflow-scroll-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 25px;
  background: linear-gradient(
    rgba(255, 255, 255, 0.001),
    white
  ); /* transparent keyword is broken in Safari */
  pointer-events: none;
}
.overflow-scroll-gradient__scroller {
  overflow-y: scroll;
  background: white;
  width: 240px;
  height: 200px;
  padding: 15px 0;
  line-height: 1.2;
  text-align: center;
}

7. 环形旋转器

用CSS动画创建一个正在加载的动画

<div class="donut"></div>

CSS代码

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

其实有很多加载动画都可以用css3去书写, 如果不考虑IE9以下的流浪器

动画资源