-
animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点 @keyframes move { 0%{ transform: translate(0); } 15%{ transform: translate(100px,180px); } 30%{ transform: translate(150px,0); } 45%{ transform: translate(250px,180px); } 60%{ transform:translate(300px,0); } 75%{ transform: translate(450px,180px); } 100%{ transfrom: translate(480px,0); } } div { width: 500px; height: 200px; border: 1px solid red; margin: 20px auto; } div span { display: inline-block; width: 20px; height: 20px; background: green; border-radius: 100%; animation-name:move; animation-duration: 10s; animation-timing-function:ease; animation-delay:3s; animation-iteration-count:infinite; }查看全部
-
animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。 animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]* /*实例*/ animation-name:move;//调用动画 animation-duration: 10s;//设置播放时间 animation-timing-function:ease;//播放方式查看全部
-
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒查看全部
-
animation-name属性主要是用来调用@keyframes定义好的动画。需要特别注意:animation-name调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果查看全部
-
Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } }查看全部
-
background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。 background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1.auto:默认值，不改变背景图片的原始宽度和高度 2.<长度值>：成对出现如200px 50px 将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放 3.<百分比>：0%~100%之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面的百分比得出的数值，当设置一个值时同上 4.cover:将背景图片等比缩放以充满整个容器 5.contain:将背景图片等比缩放值某一边紧贴容器边缘为止查看全部
-
应该是padding-box查看全部
-
background-clip: 用来将背景图片做适当的裁剪以适应实际需要： 语法：background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。查看全部
-
background-origin 设置元素的起始位置： 语法： background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。 注意：如果背景不是no-repeat，这个属性无效，它会从边框开始显示。查看全部
-
列表边框——column-rule column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。 语法：column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> 取值说明： column-rule-width：类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接受负值。但也像border-width属性一样，可以使用关键词：medium，thick，thin column-rule-style：类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属性相同，包括none，hidden，dotted，dashed，solid，double，groove，ridge，inset，outset。 column-rule-color：类似于border-color属性，主要用来定义边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果为希望显示颜色，也可以将其设置为transparent(透明色)。查看全部
-
列间距——column-gap column-gap主要用来设置列与列之间的间距。 语法：column-gap: normal || <length> 取值说明： normal：默认值，默认值为1em(如果你的字号是px，其默认值为你的font-size值) <length>：此值用来设置列与列之间的距离，其可以使用px，em单位的任何整数值，但不能是负值。查看全部
-
多列布局——column-count column-count属性主要用来给元素指定想要的列数和允许的最大列数。 语法：column-count：auto | <intger> 取值说明： auto：此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 <integer>：此值为正数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。查看全部
-
多列布局——Columns 语法：columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数：列宽和列数 <column-width>：主要用来定义多列中每列的宽度。 <column-count>：主要用来定义多列中的列数。 要加浏览器前缀。查看全部
-
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted pointer-events属性有很多值，但是对于浏览器来说，只有auto和non两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。 pointer-events属性值详解 auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。 none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。 其它属性值为SVG专用，这里不再多介绍了。 浏览器兼容性 Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。好吧，还是有点儿悲催～～查看全部
-
设置动画的播放状态 animation-play-state属性主要用来控制元素动画的播放状态。 参数： 其主要有两个值：running和paused。 其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。查看全部
举报
0/150
提交
取消