-
column-gap: normal || <length> normal的默认值为1em 如果你的字号是px即与font-size的大小一样查看全部
-
auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。查看全部
-
如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。 注意兼容性写法查看全部
-
olumns：<column-width> || <column-count> 列宽和列数 中间用空格而不要用逗号查看全部
-
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。 在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。 主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下 none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果 在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。查看全部
-
animation-play-state属性主要用来控制元素动画的播放状态 其主要有两个值：running和paused 可以用来设置某个时候动画不播放 animation-play-state:paused;查看全部
-
animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate 1.normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2.另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。查看全部
-
animation-iteration-count: infinite | <number> [, infinite | <number>]* 多个设置用逗号隔开 1.其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。 2.如果取值为infinite，动画将会无限次的播放。查看全部
-
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。 取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。查看全部
-
@Keyframes 需要与 animation配合使用 他们通常用于多个变化帧 即里面写的是变化的样式 其他的变化速度 持续时间 延迟时间还是要写在后面 在@Keyframes写好变化样式 在animation里面调用这个动画 同时写上持续时间上面的 例如 div:hover { animation: changecolor 5s ease-out .2s; } 在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}” 在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果 经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。查看全部
-
transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。 有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。查看全部
-
简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素的初始状态样式； 第二，声明过渡元素最终状态样式，比如悬浮状态； 第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 可以这么分开写 也可以卸载transition一块 -webkit-transition: background-color .5s ease .1s; transition: background-color .5s ease .1s; 注意看有过度的css属性查看全部
-
CSS3中的变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。参数可用top left等关键词，也可用百分比。 rotate更好理解查看全部
-
matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。 示例演示：通过matrix()函数来模拟transform中translate()位移的效果查看全部
-
-webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }不知道宽高的元素实现水平垂直居中 translate一般可以用百分比！且用的多查看全部
举报
0/150
提交
取消