这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

前言

CSS3 作为前端三大件之一，又叫层叠样式表，是前端开发页面必不可少的一个工具，又是前端页面与用户进行交互的页面渲染。用户最开始看到的就是页面的样式，CSS具有丰富的样式定义、易于使用和修改、多页面应用等特点，CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

CSS3 动画工具介绍

我们在日常开发中，经常需要使用到CSS动画，CSS3—animation包含了一些常见的动画效果，并且包含片段代码，直接cv就可以了。

引起注意动画效果

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes bounce {
  0%, 100%, 20%, 53%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  40%,
 
部分代码片段

实现效果

大家可以多去尝试使用 CSS3动画代码大集合 - 这是一个能方便的找到CSS动画制作的代码片段的地方。 (webhek.com)

总结

CSS3作为前端必不可少需要学会的工具，很多工具包括组件库、代码片段可以提高开发效率，但是也不可以过度依赖于别人写好的样式，可以多发挥自己的想象力，手写一些CSS样式，前端的样式更加丰富，交互行为也会更有兴趣，CSS还有很多值得思考的地方。