30 Seconds of CSS

[TerryZwei]

Bouncing loader

创建跳动加载动画

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和使用tansform: translateY()属性在2D平面上跳动.
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元素上，是因为每一个元素不会在相同的时间点开始动画.

Box-sizing 重置

重置盒子模型以便于width和height都不会受到自身的border或者padding的影响.

css

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

解释

1. box-sizing: border-box使padding或者border不会影响到元素的width或者height.
2. box-sizing: inherit 使元素遵循父级元素的box-sizing规则.

浏览器支持

IE8或IE8以上.

Circle

利用纯CSS方式创建一个圆形.

HTML

<div class="circle"></div>

CSS

.circle {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background: #333;
}

解释

border-radius: 50%通过弯曲元素的边去创建一个圆.