CSS3特性 盒模型 动画
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、动画 标签。作者是听心_cy。
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 标签。作者是听心_cy。
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,依次代表距离图片上边缘、右边缘、下边缘、左边缘的距离,如图所 示:

border-image详解
当设置好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;
- width: 60px;
- height: 60px;
- border-image: url(images/border-image.png) 30 30 30 30;
- }
- <div class="box5"></div>
样例图片:

border-image
此时可以说此种情况(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;
- width: 60px;
- height: 60px;
- border-image: url(images/border-image.png) 30 30 30 30 repeat repeat;
- }
- <div class="box5"></div>
样例图片:

border-image:repeat
这段样式中总共写了2个repeat,第一个repeat定义上边(A区域)和下边(C区域)是否进行水平重复,第二个repeat定义左边(D区域)和右边(B区域)是否进行垂直重复,举例如下:
样例代码:
- .box5 {
- border: 20px;
- width: 60px;
- height: 60px;
- border-image: url(images/border-image.png) 30 30 30 30 repeat stretch;
- }
样例图片:

border-image
以上的样例中边框宽度是通过设置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;
- width: 60px;
- height: 60px;
- border-image: url(images/border-image.png) 30 30 30 30/W repeat stretch;
- }
样例图片:从上到下依次为W=10px、W=20px、W=30px

W=10px

W=20px

W=30px
以上已经将border-image的所有参数都讲解了一下,以下将对一些特殊情况以及一些小技巧进行一下举例说明:
一.当只设置url一个属性的时候,A=C=图片height,B=D=图片width
样例代码:
- .box5 {
- border: 20px;
- width: 60px;
- height: 60px;
- border-image: url(images/border-image.png);
- }
样例图片:

border-image
二.当只设置一个切割尺寸P的时候,A=B=C=D=P
样例代码:
- .box5 {
- border: 20px;
- width: 60px;
- height: 60px;
- border-image: url(images/border-image.png) 30;
- }
样例图片:

border-image
三.当只设置一个重复方式的时候,表示四条边框重复方式相同
样例代码:
- .box5 {
- border: 20px;
- width: 60px;
- height: 60px;
- border-image: url(images/border-image.png) 30 repeat;
- }
样例图片:

border-image:repeat.
此外针对重复方式还有一个属性就是round,意思是平铺,据说和repeat是有区别的,但是目前没有浏览器体现出round和repeat的区别,所以暂不考虑round属性。
注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。
一个小小的border-image属性,原本以为几句话可以说清楚,没想到写了满满一页还觉得说的不够详细,以后慢慢完善吧,今天实在是不想写了,如果有一定基础的你想必能看懂吧,O(∩_∩)O哈哈~
本条目发布于2013年11月19日。属于CSS3分类,被贴了 border-image 标签。作者是听心_cy。
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-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;
- }
样例图片:

background-clip,background-origin
本条目发布于2013年11月18日。属于CSS3分类,被贴了 background-clip、background-origin 标签。作者是听心_cy。
CSS3属性:background-origin详解(设置背景图绘制起始点)
在绘制背景图片时,浏览器默认是从padding区域左上角开始绘制,但是可以利用background-origin属性来指定从border左上角开始绘制或者从content区域左上角开始绘制。
样例代码:
- .box1 {
- background-origin: border-box;
- }
- .box2 {
- background-origin: padding-box; /* 默认 */
- }
- .box3 {
- background-origin: content-box;
- }
样例图片:

background-origin详解
CSS3特性 盒模型 动画的更多相关文章
- CSS3弹性盒模型,Flex布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...
- CSS3 完善盒模型
CSS3 改善了传统盒模型结构,增强了盒子构成要素的功能,扩展了盒模型显示的方式. 改善结构:为盒子新增轮廓区: 增强功能:内容区增强 CSS 自动添加内容功能,增强内容移除.换行处理:允许多重定义背 ...
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...
- css3基础教程:CSS3弹性盒模型
今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
- css3弹性盒模型flex快速入门与上手(align-content与align-items)
接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...
- css和css3弹性盒模型实现元素宽度(高度)自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
- CSS3使用盒模型实现三栏布局
本篇文章由:http://xinpure.com/css3-box-model-to-implement-a-three-column-layout/ 使用 Position 绝对定位也是可以实现三栏 ...
随机推荐
- js数组去重方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【20160924】GOCVHelper 图像处理部分(3)
//根据轮廓的圆的特性进行选择 vector<VP> selectShapeCircularity(Mat src,Mat& draw,vector<VP> c ...
- for与if、else的使用
#!/usr/bin/env python def fun3(x) : num =0 for i in x : if i == "" : num += 1 if num == 0 ...
- C#程序设计---->计算圆面积windows程序
值得说的就是添加一个回车事件, http://blog.csdn.net/nanwang314/article/details/6176604 private void textBox1_KeyDow ...
- svn查看代码作者的命令
svn blame **.java | grep ** svn查看代码作者的命令
- 对Objective-C相关的类、方法、属性、成员变量介绍
类的定义@interface FirstClass :NSObject@end//@interface表示声明的是一个类,“:”表示继承关系,@end类的结束类的实现@implementation F ...
- Apriori原理与实践
Apriori: 其核心思想是通过候选集生成和情节的向下封闭检测两个阶段来挖掘频繁项集.经典的关联规则数据挖掘算法Apriori 算法广泛应用于各种领域,通过对数据的关联性进行了分析和挖掘,挖掘出的这 ...
- SPSS数据分析—协方差分析
我们在实际工作中为了准确的分析问题,经常会收集多个变量,这些变量之前存在相互影响,导致分析的因素混杂,影响分析结果,为了获得准确的实验效应,我们需要控制其中一些影响因变量的变量,这些变量称为就协变量, ...
- 【汇编】mov [1000],bx:immediate operand not allowed
],bx;在目的操作数中编译器会忽略[],所以[1000]就成了立即数,出现“immediate operand not allowed”改: ;mov bx,[1000];而在源操作数中,就不会出现 ...
- MongoDB整库备份与还原以及单个collection备份、恢复方法
mongodb数据库维护离不开必要的备份.恢复操作,而且一般不会出错,所以我们在使用的时候大部分时候使用备份和恢复操作就可以了 mongodump.exe备份的原理是通过一次查询获取当前服务器快照 ...