-
文本阴影:Xpx Ypx (模糊距离)px 颜色查看全部
-
设置动画时间外属性 animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none、forwards、backwords和both。 在默认情况之下,动画不会影响它的关键帧之外的属性,使用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,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。查看全部
-
background:url(xx.jpg) 70 70 70 70 no-repeat;查看全部
-
设置动画播放次数 animation-iteration-count属性主要用来定义动画的播放次数。 语法规则: animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数,但也可以使用带有小数的数字,其默认值为1,这意味着动画将从开始到结束只播放一次。 2、如果取值为infinite,动画将会无限次的播放。查看全部
-
设置动画开始播放的时间 animation-delay属性用来定义动画开始播放的时间,用来触发动画播放的时间点。和transition-delay属性一样,用于定义在浏览器开始执行动画之前等待的时间。 语法规则: animation-delay:<time>[,<time>]*查看全部
-
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>,查看全部
-
设置动画播放时间 animation-duration主要用来设置CSS3动画播放时间,其使用方法和transition-duration类似,是用来指定元素播放动画所持续的时间长,也就是完成从0%到100%一次动画所需时间。单位:S秒 语法规则 animation-duration: <time>[,<time>]*查看全部
-
animation-name属性主要是用来调用@keyframes定义好的动画。需要特别注意:animation-name调用的动画名需要和“@keyframes”定义的动画名称完全一致(区分大小写),如果不一致将不具有任何动画效果。 语法: animation-name: none | IDENT[,none|DENT]*; 1、IDENT是由@keyframes创建的动画名,上面已经讲过了(animation-name调用的动画名需要和“@keyframes”定义的动画名称完全一致); 2、none为默认值,当值为none时,将没有任何动画效果,这可以用于覆盖任何动画。查看全部
-
Keyframes介绍 Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个“@keyframes”中的样式规则可以由多个百分比构成的,如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果。查看全部
-
box-sizing:border-box查看全部
-
column -span查看全部
-
线性渐变:linear-gradient(方向,起始颜色,结束颜色); 方向:to top=0deg,to bottom=180deg,to right,to left,to top left,to top right 径向渐变:radial-gradient(圆心颜色,外圈颜色);查看全部
-
字体颜色:color:rgba(R,G,B,透明度); 字体背景颜色:background-color:rgba(R,G,B,透明度); 间隔的逗号《,》为英文字体时的逗号,中文时无法显示查看全部
举报
0/150
提交
取消