-
“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。查看全部
-
:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0查看全部
-
:last-child”选择器选择的是元素的最后一个子元素查看全部
-
:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。查看全部
-
完整的代码。查看全部
-
发现这个用来做响应式页面还是不错的。 可以测试一下。 <column-width>和<column-count>分别定义的话,列宽起控制作用; columns: 的话,列数起控制作用。查看全部
-
:empty选择器表示的就是空。用来选择没有任何内容的元素;查看全部
-
:not选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。查看全部
-
root选择器:匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>;意思是:root{} = html{}查看全部
-
设置动画时间外属性 animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none、forwards、backwords和both。其四个属性值对应效果如下: 属性值 效果 none 默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果 在默认情况之下,动画不会影响它的关键帧之外的属性,使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始,或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。 例如:让动画停在最一帧处。代码如下: animation-fill-mode:forwards;查看全部
-
设置动画的播放状态 animation-play-state属性主要用来控制元素动画的播放状态。 参数: 其主要有两个值:running和paused。 其中running是其默认值,主要作用就是类似于音乐播放器一样,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。另外如果暂停了动画的播放,元素的样式将回到最原始设置状态。 例如,页面加载时,动画不播放。代码如下: animation-play-state:paused;查看全部
-
设置动画播放方向 animation-direction属性主要用来设置动画播放方向,其语法规则如下: animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值:normal、alternate 1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放; 2、另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。 例如:通过animation-direction属性,将move动画播放动画方向设置为alternate,代码为: animation-direction:alternate; 注意:Chrome或Safari浏览器,需要加入-webkit-前缀!查看全部
-
设置动画播放次数 animation-iteration-count属性主要用来定义动画的播放次数。 语法规则: animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数,但也可以使用带有小数的数字,其默认值为1,这意味着动画将从开始到结束只播放一次。 2、如果取值为infinite,动画将会无限次的播放。 举例: 通过animation-iteration-count属性让动画move只播放5次,代码设置为: animation-iteration-count:5; 注意:Chrome或Safari浏览器,需要加入-webkit-前缀!查看全部
-
设置动画播放方式 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>)]* 它和transition中的transition-timing-function一样,具有以下几种变换方式:ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。对应功如下: ease/linear/ease-in/ease-out/ease-in-out查看全部
-
设置动画播放时间 animation-duration主要用来设置CSS3动画播放时间,其使用方法和transition-duration类似,是用来指定元素播放动画所持续的时间长,也就是完成从0%到100%一次动画所需时间。单位:S秒 语法规则 animation-duration: <time>[,<time>]* 取值<time>为数值,单位为秒,其默认值为“0”,这意味着动画周期为“0”,也就是没有动画效果(如果值为负值会被视为“0”)查看全部
举报
0/150
提交
取消