摘自<css世界>(张鑫旭著)经典案例---------持续更新中

1.需求:页面某个模块的文字内容是动态的,可能是几个字,也可能是一句话.然后,希望文字少的时候居中显示,文字超过一行的时候居左显示.该如何实现呢?

/**核心css代码如下:**/
.box {
  text-align:center;
}
.content {
  display:inline-block;
  text-align:left;
}

2.需求:展开收起,带有滑动效果

/**核心代码如下**/
.element {
  max-height:0;
  overflow:hidden;
  transtion: max-height .25s;
}
.element.active {
  max-height:666px; //一个足够大的最大高度值
}

3.需求:鼠标移动到文字上方时,文字被替换为图片

/**核心代码如下**/
h1:hover {
  content: url('图片链接')
}

4.需求:css加载中...动态效果

正在加载中<dot>...</dot>
dot {
  display:inline-block;
  height:1em;
  line-height:1;
  text-align: left;
  vertical-align: -.25em;
  overflow: hidden;
}
dot::before {
  display:block;
  content: '...\A..\A.';
  white-space: pre-wrap;
  animation: dot 3s infinite step-start both;
}
@keyframes dot {
  33% {transform: translateY(-2em);}
  66% {transform: translateY(-1em);}
}