gulan123 - 博客园

2016年9月5日

摘要： column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> column-gap: normal || <length> 取值说明属性值属性值说明 normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font 阅读全文

posted @ 2016-09-05 12:01 gulan123 阅读(454) 评论(0) 推荐(0) 编辑

多列布局——column-count

摘要： column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则： column-count：auto | <integer> 取值说明：属性值属性值说明 auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 <integer> 阅读全文

posted @ 2016-09-05 11:59 gulan123 阅读(1094) 评论(0) 推荐(0) 编辑

多列布局——column-width

摘要： column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示； column-width: auto | <length> 取值说明属性值说明 auto 如果阅读全文

posted @ 2016-09-05 11:52 gulan123 阅读(450) 评论(0) 推荐(0) 编辑

多列布局——Columns

摘要：为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的阅读全文

posted @ 2016-09-05 11:51 gulan123 阅读(235) 评论(0) 推荐(0) 编辑

2016年8月30日

设置动画时间外属性

摘要： animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：属性值效果 none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 for 阅读全文

posted @ 2016-08-30 11:26 gulan123 阅读(146) 评论(0) 推荐(0) 编辑

设置动画的播放状态

摘要： animation-play-state属性主要用来控制元素动画的播放状态。参数：其主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新阅读全文

posted @ 2016-08-30 11:23 gulan123 阅读(142) 评论(0) 推荐(0) 编辑

设置动画播放方向

摘要： animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为n 阅读全文

posted @ 2016-08-30 11:19 gulan123 阅读(198) 评论(0) 推荐(0) 编辑

设置动画播放次数

摘要： animation-iteration-count属性主要用来定义动画的播放次数。语法规则： animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1 阅读全文

posted @ 2016-08-30 11:16 gulan123 阅读(300) 评论(0) 推荐(0) 编辑

设置动画开始播放的时间

摘要： animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。语法规则： animation-delay:<time>[,<time>]* 案例演示：浏览器渲染样式之后2S之后触发m 阅读全文

posted @ 2016-08-30 11:15 gulan123 阅读(430) 评论(0) 推荐(0) 编辑

设置动画播放方式

摘要： animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。语法规则： animation-timing-function:ease | linear | ease-in | ease-out | ea 阅读全文

posted @ 2016-08-30 10:57 gulan123 阅读(233) 评论(0) 推荐(0) 编辑