CSS3特性 盒模型 动画

 

转发自0101后花园

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）

5条评论

在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的工作原理：

1. 首先分离出left-top、right-top、left-bottom、right-bottom这四块图片分别对应放到盒子border的四个角上，同时按照盒子border四个角的尺寸进行缩放直至铺满
2. 然后分离出每条边中间的区域即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

此时可以说此种情况（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>

样例图片：

border-image:repeat

这段样式中总共写了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-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;
     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;
  60px;
 height: 60px;
 border-image: url(images/border-image.png);
 }

样例图片：

border-image

二.当只设置一个切割尺寸P的时候，A=B=C=D=P

样例代码：

.box5 {
    border: 20px;
     60px;
    height: 60px;
    border-image: url(images/border-image.png) 30;
 }

样例图片：

border-image

三.当只设置一个重复方式的时候，表示四条边框重复方式相同

样例代码：

.box5 {
    border: 20px;
     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详解