CSS实例 - CSS 可以做的 4 件事 - 《Web前端》

1、逐帧动画
- 样式代码
4、自定义下划线

CSS

1、逐帧动画

经常使用css3中的animation动画，比如这样：

.fadeIn{
  animation: fadeIn .5s ease 1s both;
}
@keyframes fadeIn{
  from{
    opacity:0;
  }
  to{
    opacity:1
  }
}

这样就实现了延时1s，一共0.5s的淡入动画。其中ease是animation-timing-function的默认值。animation-timing-function使用了三次贝塞尔（Cubic Bezier）函数生成速度曲线，可以让动画产生平滑的过渡。但是有的时候并不想要平滑的过渡，比如想要实现下面小人跑动的效果，该怎么实现呢？
CSS 可以做的 4 件事 - 图1

可以将小人跑动的动作分解，拼成下面的雪碧图：

CSS 可以做的 4 件事 - 图2
通过设置不同的background-position设置不同时间小人不通的动作

@keyframes run {
  0% {
    background-position: 0 0
  }
  10%{
    background-position: -100% 0
  }
  20%{
    background-position: -200% 0
  }
  30%{
    background-position: -300% 0
  }
  40%{
    background-position: -400% 0
  }
  50%{
    background-position: 0 -100%
  }
  60%{
    background-position: -100% -100%
  }
  70%{
    background-position: -200% -100%
  }
  80%{
    background-position: -300% -100%
  }
  90%{
    background-position: -400% -100%
  }
  100%{
    background-position: 0 0
  }
}

用animation让动画动起来吧，想让动画每帧动，而不带中间的过渡效果animation-timing-function要设置成steps函数
```
.people{
  width: 100px;
  height: 114px;
  background: url(../images/people.png);
  -webkit-animation:run 1s steps(1) 0s infinite both;
  animation:run 1s steps(1) 0s infinite both;
}
```
小人动起来啦！

或者更简单，把雪碧图拼成这样：
```css .people{ width: 100px; height: 114px; background: url(../images/people.png); -webkit-animation:run 1s steps(9) 0s infinite both; animation:run 1s steps(9) 0s infinite both; }

@-webkit-keyframes run { to{ background-position: -900% 0 } }

`steps`函数接受两个参数，第一个参数会根据指定的步进数量，把整个动画切分为多帧，第二个可选的参数可以是 start 或 end(默认)。这个参数用于指定动画在每个循环周期的什么位置发生帧的切换动作。还可以使用 step-start 和 step-end 这样的简写属性,它们分别等同于 steps(1, start) 和 steps(1, end)<br />很多时候gif动画都可以直接用css效果实现，快来试试吧！
<a name="Hl4eA"></a>
## 2、连字符
CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。<br />例如：<br />如果简单地应用值为auto的hyphens属性，它对于连字符就足够了，但是，需要通过lang HTML 属性声明一种语言。<br />![](https://cdn.nlark.com/yuque/0/2021/webp/396745/1630981987076-82c6583d-cee9-4bf1-9bc5-d2390deceffc.webp#clientId=u2f02a131-6503-4&from=paste&id=uca6fd60b&originHeight=538&originWidth=1000&originalType=url&ratio=1&status=done&style=shadow&taskId=ub15c1aa0-c10d-4c91-8ae6-3be57b4646f)
<a name="BJRBk"></a>
## 3、Sticky Footer
Sticky Footer是css的一种布局场景。页脚footer永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移，移动端特定布局也需要Sticky Footer来解决这些问题。<br />![2021-09-07-10-33-21-037014.gif](https://cdn.nlark.com/yuque/0/2021/gif/396745/1630982449766-d12d3fee-0c17-4c9a-b25b-affb74d1a3f9.gif#clientId=u2f02a131-6503-4&from=ui&id=ucf8d5702&originHeight=354&originWidth=200&originalType=binary&ratio=1&size=1842121&status=done&style=shadow&taskId=u3eb3ab6b-13ca-44ef-bc40-819b5492743)<br />开发中一定遇到过 Web 应用程序中页脚的问题，在这种情况下，具有任何块级样式的页脚在处理较长的内容时，可以正常工作，但在页面较短时时就不准确了。<br />此问题出现在内容短于视口高度减去页脚高度的较短页面上。<br />![2021-09-07-10-33-21-170014.png](https://cdn.nlark.com/yuque/0/2021/png/396745/1630982448949-b818f9c8-6d4e-4039-993b-742844726375.png#clientId=u2f02a131-6503-4&from=ui&id=eWnZJ&originHeight=597&originWidth=700&originalType=binary&ratio=1&size=95351&status=done&style=shadow&taskId=u3c43e58f-3371-49c5-9e7b-a1b6368472f)
<a name="oUDBA"></a>
### 使用 Flexbox 作为灵活的解决方案
底部不定高度，利用flex弹性布局实现效果，兼容性有限建议移动端使用<br />https://codepen.io/qietuniu/pen/EJeNYW
- 外部容器display设为flex弹性布局，flex-flow设置方向为column纵向并设置最小高度为100vh
- 主体内容flex属性设为1
<a name="vU0G1"></a>
#### DOM节点
```html
<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">这是footer</div>
</div>

样式代码

.container {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
.section {
  flex: 1
}

4、自定义下划线

在日常开发中，可能遇到过设计师要求做出更加完美的下划线，可能要求修改下划线的颜色，下划线距离文本的距离，下划线的线型等等，当抛弃下划线的默认样式，还能通过哪些方法做出满足需求的文本下划线呢~ 接下来通过案例一起看一下吧~
例如：
文本中的下划线可以使用很少的 CSS 行来实现，但请确保没有使用任何边框底部技巧。因为该解决方案不会遵循对文本所期望的一切。

注意，已经使用text-shadow属性来解决下划线如何穿过字母（如p、l、q等）的下划线的问题