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

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.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,327评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,792评论 0 2
  • 在CSS3中,有一个新的属性可以用来做一些简单的动画效果,这就是animation,中文意思就是动画。 一、首先我...
    大春春阅读 3,307评论 1 9
  • animation简介▪ animation无疑是CSS3里最牛的功能。可以采用较少的代码制作超炫的动画。▪ an...
    柒月柒日晴7阅读 456评论 0 2
  • 1.CSS3 边框 border-radius CSS属性用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两...
    garble阅读 665评论 0 0