CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果。
一.Transitions
语法:transitions: property duration timing-function
- property: 表示对哪个属性进行平滑过渡(可设置为all,则所有属性值变化时均产生动画效果)
- duration: 表示在多长时间内完成属性值的平滑过渡
- timing-function: 表示通过什么方法来进行平滑过渡(具体值下面详细介绍)
样例代码:
transitions: background-color 1s linear;
可同时设置多个属性值:
样例代码:
transitions: background-color 1s linear, color 1s linear, width 1s linear;
可同时设置所有属性值:
样例代码:
transitions: all 1s linear;
二 .Animations
语法:animations: name duration timing-function iteration-count;
- name: 关键帧集合名(通过此名创建关键帧的集合,见下面样例代码)
- duration: 表示在多长时间内完成属性值的平滑过渡
- timing-function: 表示通过什么方法来进行平滑过渡(具体值下面详细介绍)
- iteration-count: 迭代循环次数,可设置为具体数值,或者设置为infinite进行无限循环,默认为1
样例代码:
.box { background-color: red; -webkit-animation: mycolor 4s linear infinite; } @-webkit-keyframes mycolor { 0% { background-color: red; } 40% { background-color: darkblue; } 70% { background-color: yellow; } 100% { background-color: green; } }
三.实现动画的方法
- linear 在动画开始时到结束时以同样的速度进行改变
- ease-in 动画开始时速度很慢,然后速度沿曲线值加速
- ease-out 动画开始时速度很快,然后速度沿曲线值减速
- ease 动画开始速度很慢,然后速度沿曲线值加速,然后再沿曲线值减速
- ease-in-out 同ease
注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。
本条目发布于2013年11月19日。属于CSS3分类,被贴了 animations、ease、transitions、动画 标签。
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。
一.旋转 rotate
用法:transform: rotate(45deg);
共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。
二.缩放 scale
用法:transform: scale(0.5) 或者 transform: scale(0.5, 2);
参数表示缩放倍数;
- 一个参数时:表示水平和垂直同时缩放该倍率
- 两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。
三.倾斜 skew
用法:transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
参数表示倾斜角度,单位deg
- 一个参数时:表示水平方向的倾斜角度;
- 两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。
关于skew倾斜角度的计算方式表面上看并不是那么直观,这里借鉴某大拿绘制的图举例说明一下:
首先需要说明的是skew的默认原点transform-origin是这个物件的中心点
skewX(30deg) 如下图:
skewY(10deg) 如下图:
skew(30deg, 10deg) 如下图:
我当初就是看到此图瞬间理解的。
四.移动 translate
用法:transform: translate(45px) 或者 transform: skew(45px, 150px);
参数表示移动距离,单位px,
- 一个参数时:表示水平方向的移动距离;
- 两个参数时:第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离。
五.基准点 transform-origin
在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用transform-origin属性,可以改变变形的基准点。
用法:transform-origin: 10px 10px;
共两个参数,表示相对左上角原点的距离,单位px,第一个参数表示相对左上角原点水平方向的距离,第二个参数表示相对左上角原点垂直方向的距离;
两个参数除了可以设置为具体的像素值,其中第一个参数可以指定为left、center、right,第二个参数可以指定为top、center、bottom。
六.多方法组合变形
上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法,这里讲介绍综合使用这几个方法来对一个元素进行多重变形。
用法:transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
这四种变形方法顺序可以随意,但不同的顺序导致变形结果不同,原因是变形的顺序是从左到右依次进行,这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate
注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。
本条目发布于2013年11月19日。属于CSS3分类,被贴了 rotate、scale、skew、transform、transform-origin、translate 标签。
CSS3属性border-image详解(边框图片)
border-image一共有4项参数,本文将对这4项参数依次讲解及举例说明,为了方便理解,先介绍最常用的使用方式。
语法:border-image: url(bbs0101.png) A B C D; 第一个参数url就是背景图片路径,不做过多解释,其次4个参数ABCD表示4个像素值,不需要带单位,默认为px,同时也可以设置为百分比,百分比是 针对背景图片计算的,比如图片宽100px,A=20%=100px*20%=20px,依次代表距离图片上边缘、右边缘、下边缘、左边缘的距离,如图所 示:
当设置好ABCD四个值之后,相当于按照这4个值对图片切了4刀,形成一个九宫格,此时我们需要按照以下两步分析border-image的工作原理:
- 首先分离出left-top、right-top、left-bottom、right-bottom这四块图片分别对应放到盒子border的四个角上,同时按照盒子border四个角的尺寸进行缩放直至铺满
- 然后分离出每条边中间的区域即A、B、C、D所在的四个区域,分别放到盒子border的对应4个位置上,同时按照border对应区域的尺寸进行缩放直至铺满
背景图如图所示:此图尺寸为90*90 中间所有小菱形等尺寸。
样例代码:
.box5 { border: 20px; 60px; height: 60px; border-image: url(images/border-image.png) 30 30 30 30; } <div class="box5"></div>
样例图片:
此时可以说此种情况(border-image: url(bbs0101.png) A B C D;)的border-image已经完成渲染工作,不过这里的第二步中采用的是拉伸方式(默认方式:stretch)铺满边框,我们还可以手动设置成 repeat以按照平铺方式渲染,如下:
语法:border-image: url(bbs0101.png) A B C D repeat repeat;
样例代码:
.box5 { border: 20px; 60px; height: 60px; border-image: url(images/border-image.png) 30 30 30 30 repeat repeat; } <div class="box5"></div>
样例图片:
这段样式中总共写了2个repeat,第一个repeat定义上边(A区域)和下边(C区域)是否进行水平重复,第二个repeat定义左边(D区域)和右边(B区域)是否进行垂直重复,举例如下:
样例代码:
.box5 { border: 20px; 60px; height: 60px; border-image: url(images/border-image.png) 30 30 30 30 repeat stretch; }
样例图片:
以上的样例中边框宽度是通过设置border:20;来完成的,这里需要声明一下,如果想使用border-image属性则border必须存在 且border-width必须要大于0,但是是不是只能border的尺寸来控制border-image的尺寸呢,我这么问当然就不是了,这里再介绍 border-image的最后一个参数W
语法:border-image: url(bbs0101.png) A B C D/W repeat repeat;
W为border-image各边框宽度,设置时需要带上单位px,即使设置了W,也不能设置border-width=0!
样例代码:
.box5 { border: 20px; 60px; height: 60px; border-image: url(images/border-image.png) 30 30 30 30/W repeat stretch; }
样例图片:从上到下依次为W=10px、W=20px、W=30px
以上已经将border-image的所有参数都讲解了一下,以下将对一些特殊情况以及一些小技巧进行一下举例说明:
一.当只设置url一个属性的时候,A=C=图片height,B=D=图片width
样例代码:
.box5 { border: 20px; 60px; height: 60px; border-image: url(images/border-image.png); }
样例图片:
二.当只设置一个切割尺寸P的时候,A=B=C=D=P
样例代码:
.box5 { border: 20px; 60px; height: 60px; border-image: url(images/border-image.png) 30; }
样例图片:
三.当只设置一个重复方式的时候,表示四条边框重复方式相同
样例代码:
.box5 { border: 20px; 60px; height: 60px; border-image: url(images/border-image.png) 30 repeat; }
样例图片:
此外针对重复方式还有一个属性就是round,意思是平铺,据说和repeat是有区别的,但是目前没有浏览器体现出round和repeat的区别,所以暂不考虑round属性。
注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。
一个小小的border-image属性,原本以为几句话可以说清楚,没想到写了满满一页还觉得说的不够详细,以后慢慢完善吧,今天实在是不想写了,如果有一定基础的你想必能看懂吧,O(∩_∩)O哈哈~
本条目发布于2013年11月19日。属于CSS3分类,被贴了 border-image 标签。
CSS3属性:background-clip详解(设置背景图显示区域)
背景图片默认显示区域包括border、padding、content区域,但是可以改变background-clip值设置显示区域不包括border区域或者只显示content区域。
样例代码:
.box1 { background-clip: border-box; /* 默认 */ } .box2 { background-clip: padding-box; } .box3 { background-clip: content-box; }
样例图片:
此时发现一个问题,设置了background-clip之后只是改变了背景图片显示区域,但是显示区域现实的图片并不是从图片左上角开始绘制的,如果想要让背景图片在显示区域从左上角开始显示则需要配合background-origin属性使用:
样例代码:
.box1 { background-clip: border-box; /* 默认 */ background-origin: border-box; } .box2 { background-clip: padding-box; background-origin: padding-box; /* 默认 */ } .box3 { background-clip: content-box; background-origin: content-box; }
样例图片:
本条目发布于2013年11月18日。属于CSS3分类,被贴了 background-clip、background-origin 标签。
CSS3属性:background-origin详解(设置背景图绘制起始点)
在绘制背景图片时,浏览器默认是从padding区域左上角开始绘制,但是可以利用background-origin属性来指定从border左上角开始绘制或者从content区域左上角开始绘制。
样例代码:
.box1 { background-origin: border-box; } .box2 { background-origin: padding-box; /* 默认 */ } .box3 { background-origin: content-box; }
样例图片: