今天完成的事：学习 CSS 3 的动画 知识  学习 BFC   修改任务14-15  

CSS3

animation动画知识

一，transform-origin 变换原点

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示：

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：

transform-origin取值为center（或center center或50% 或50% 50%）：·

transform-origin取值为top（或top center或center top或50％ 0）：

transform-origin取值为right(或right center 或center right 或 100％ 或 100％ 50％)：

transform-origin取值为bottom(或bottom center 或center bottom 或 50％ 100％)：

transform-origin取值为left(或left center或center left或0或0 50％):

transform-origin取值为top left(或left top或0 0)：

transform-origin取值为right top（或top right或100％ 0）：

transform-origin取值为bottom right（或right bottom或100％ 100％）:

transform-origin取值为left bottom（或bottom left 或 0 100％）:

二，3D转化

要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需要注意的地方，这里把我学习的方法，过程分享给大家。再讲知识点之前，还是先弄清楚3D的坐标系吧，从网上搜了一张经典坐标系图，供大家回顾一下。

1. 3D视图

       transform-style:flat（默认，二维效果）/preserve-3d（三维效果）。设置一个元素的transform-style:preserve-3d;只影响这个元素的子元素（如果孙元素也需要有3d效果，则需要给该元素的父元素设置preserve-3d）。这样所有的子元素都可以相对于父元素进行3d转换操作。和二维变化一样，三维变化使用transform属性来设置。下面列举几个常用的函数：

　　translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px;

　　scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleY()。

　　rotateX(angle) 是元素依照x轴旋转；

　　rotateY(angle) 是元素依照y轴旋转；

　　rotateZ(angle) 是元素依照z轴旋转。

2. 透视效果

       perspective(length)为设置三维透视的距离。仅作用于元素的后代，而不是元素本身。当perspective:none;或perspective:0;时，相当于没有设置perspective(length)。

       加入要创建一个小立方体，长宽高都是200px，如果perspective的属性值小于200px，那么就相当于站在盒子里面看结果，如果perspective的属性值非常大，那就是站在非常远的地方看。

       当元素没有设置perspective时，所有后代被压缩在二维平面上，不存在透视效果。如果设置了perspective，将会看到三维效果。默认的透视视角中心是在容器的中点（注意是设置perspective的元素中点，不是他的后代元素），也就是perspective-origin:50% 50%;,也可以自己设置，比如：perspective-origin:0% 0%;,则是将视角定在左上角。

       下面是几张效果图，创建了一个长宽高都是200px的立方体，三维中点(0,0,0)在立方体的中心

demo如下：

当不设置perspective，也没有动画的初始画面

demo如下：

可以看到我们根本不知道他是一个立方体，除非他像上面那样动一下。

当加上perspective属性时

demo如下：：

当perspective小于100px时（因为三维中点在立方体中心，所以相当于立方体在Z轴上的高度只有100px），可以看出是相当于在立方体里面看结果

demo如下：:

注意： 

       （1）如果一个元素绕x轴或者y轴旋转90度以上的话，他的背面将面向用户。背面的元素始终是透明的，所以用户能在后面看到正面的反向形态。如果不想让从背面看到正面的话，可以设置backface-visibility为hidden，那么这个元素在背面时是不可见的。比如说做扑克牌时是不希望在背面看到的。如果一个元素的背面是可见的，旋转时他将掩盖他下面的元素，而不是露出他下面的元素。

       （2）如果父元素设置了overflow:hidden;那么子元素就无法跳出父元素的平面，即z轴的效果都将无法显示，相当于transform-style:flat;

三，animation

CSS3的animation

CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。下面通过本文给大家分享基于CSS3 animation动画属性实现轮播图效果，需要的朋友参考下吧

animation简介：

CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成：

1）通过类似Flash动画中的帧来声明一个动画；

2）在animation属性中调用关键帧声明的动画。

animation属性值：

animation 属性是一个简写属性

语法：animation: name duration timing-function delay iteration-count direction;

animation设置的六个动画属性：

animation-name：规定需要绑定到选择器的 keyframe 名称。取值：

none：（默认）规定无动画效果（可用于覆盖来自级联的动画）。

keyframename：规定需要绑定到选择器的 keyframe 的名称。

animation-duration：规定完成动画所花费的时间，以秒或毫秒计。取值：

time：规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

animation-timing-function：规定动画的速度曲线。取值：

ease：默认。动画以低速开始，然后加快，在结束前变慢。

linear：动画从头到尾的速度是相同的。

ease-in：动画以低速开始。

ease-out：动画以低速结束。

ease-in-out：动画以低速开始和结束。

cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是从 0 到 1 的数值。

animation-delay：规定在动画开始之前的延迟。取值：

time：（可选）定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。

animation-iteration-count： 规定动画应该播放的次数。取值：

n：定义动画播放次数的数值。

infinite：规定动画应该无限次播放。

animation-direction：规定是否应该轮流反向播放动画。取值：

normal：默认值。动画应该正常播放。

alternate：动画应该轮流反向播放。

animation动画实现轮播图

四，CSS3 @keyframes 规则

要创建CSS3动画，你将不得不了解@keyframes规则。

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称

规定动画的时长

OperaSafariChromeFirefoxInternet Explorer

实例

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div

{

    animation: myfirst 5s;

    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */

}

注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

OperaSafariChromeFirefoxInternet Explorer

实例

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

@keyframes myfirst

{

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

}

@-webkit-keyframes myfirst /* Safari 与 Chrome */

{

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

}

五，CSS3 transform 属性

属性定义及使用说明

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

为了更好地理解Transform属性,请查看 在线实例.

默认值： none

继承： no

版本： CSS3

JavaScript 语法： object.style.transform="rotate(7deg)"

语法

transform: none|transform-functions;

值 描述

none 定义不进行转换。

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。

translate(x,y) 定义 2D 转换。

translate3d(x,y,z) 定义 3D 转换。

translateX(x) 定义转换，只是用 X 轴的值。

translateY(y) 定义转换，只是用 Y 轴的值。

translateZ(z) 定义 3D 转换，只是用 Z 轴的值。

scale(x[,y]?) 定义 2D 缩放转换。

scale3d(x,y,z) 定义 3D 缩放转换。

scaleX(x) 通过设置 X 轴的值来定义缩放转换。

scaleY(y) 通过设置 Y 轴的值来定义缩放转换。

scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。

rotate(angle) 定义 2D 旋转，在参数中规定角度。

rotate3d(x,y,z,angle) 定义 3D 旋转。

rotateX(angle) 定义沿着 X 轴的 3D 旋转。

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。

skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

perspective(n) 为 3D 转换元素定义透视视图。

通过以上的知识点制作一个  动画  demo

任务名称：css-task13

成果链接：https://1239937890.github.io/mywork/task13/html/task-13-1.html

任务耗时：11.22日-11.25日    4天

官网脑图：

自己的脑图：

任务总结：

 1 ，使用简写属性及默认值

常用简写属性包括 animation、background、border、font、margin、padding、transition...

使用简写的 font 属性时如果不使用 icon 等关键字时至少要指定 font-size 和 font-family 属性，并且 font-size 必须位于 font-family 之前，其他的属性(如font-weight,font-style,font-variant)如未指定将自动使用默认值，并且必须位于 font-size 之前，line-height 必须位于 font-size 之后，并且和 font-size 用 “/” 分隔

省略了部分简写属性值的时候，缺失的部分就会使用该属性的默认值，

2合理利用继承
通常情况下，指定了样式的元素的后代会自动继承某些样式属性，比如 color

.content h1,
.content div,
.content p,
.content ul,
.content li {
color: #666;
}

/* 这样更简单 */
.content {
color: #666;
}

注意，有些元素会带有浏览器默认样式，比如 h1 的 font-size，该默认样式会覆盖掉继承值

常用可继承属性包括 color, font, text-align, text-indent...

也可以强制指定一个不能继承的属性实现继承效果

3，群组选择器
,
h1 {color: blue;}
h2 {color: blue;}
h3 {color: blue;}
h4 {color: blue;}
h5 {color: blue;}
h6 {color: blue;}

/* 这样更简单 */
h1, h2, h3, h4, h5, h6 {color: blue;}

将具有很多相同样式的选择器群组在一起，可以有效地精简代码。比如这里定义了两个不相关的东西，

.badge {
background-color: orange;
border-raidus: 5px;
color: #fff;
font-size: 13px;
}

中间还有很多其它样式

.label {
background-color: orange;
border-raidus: 5px;
color: #fff;
font-size: 12px;

对比发现两者有很多相同的样式，把相同的样式群组后，

.badge,
.label {
background-color: orange;
border-raidus: 5px;
color: #fff;
}

中间还有很多其它样式

.badge {
/* 只看这里的话看不出来该类还有其它样式 */
font-size: 13px;
}

中间还有很多其它样式

.label {
/* 只看这里的话看不出来该类还有其它样式 */
font-size: 12px;
}

这样造成同一个组件的样式散落在各处，维护会变得困难，使用 CSS 预处理器可以有效解决这个问题，比如 Sass 的 %占位符语法，几乎就是为群组选择器量身打造的，

%label {
background-color: orange;
border-raidus: 5px;
color: #fff;
}

中间还有很多其它样式

.badge {
/* 在这里可以清晰地看出来该类还有其它样式 */
@extend %label;
font-size: 13px;
}

中间还有很多其它样式

.label {
/* 在这里也可以清晰地看出来该类还有其它样式 */
@extend %label;
font-size: 12px;
}

群组选择器的时候需要注意不要将有浏览器兼容性的选择器群组在一起，会造成不能识别而忽略整个规则集，以下代码就不能群组在一起，

input::-webkit-input-placeholder {
color: #999;
}

input::-moz-placeholder {
color: #999;
opacity: 1;
}

input:-ms-input-placeholder {
color: #999;
}