美文网首页
CSS3动画(animation)和多列(column)

CSS3动画(animation)和多列(column)

作者: 小锋子_Gruad | 来源:发表于2016-06-17 15:05 被阅读46次

    1. 动画

    通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

    1. CSS3 @keyframes 规则
      如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
      @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
    2. 当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
      通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
    1. 规定动画的名称
    2. 规定动画的时长

    1.animation-name 2. animation-duration 3. animation-timing-function 4. animation-delay 5. animation-iteration-count:n|infinite 属性定义动画的播放次数。6. animation-direction: normal|alternate;animation-direction 属性定义是否应该轮流反向播放动画。 7. animation-play-state:paused|running 属性规定动画正在运行还是暂停。8. animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。animation-fill-mode : none | forwards | backwards | both;.

    2. 多列(column)

    通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!

    1.column-count 2. column-gap 3. column-rule:1px solid red; 4. column-span 5. column-width.

    相关文章

      网友评论

          本文标题:CSS3动画(animation)和多列(column)

          本文链接:https://www.haomeiwen.com/subject/ndkvdttx.html