明天计划的事：

开始深度研究下语句指令还有  动画之类的知识，感觉理解的不是太深，很模糊的感觉

遇到的问题：

当我用@each指令  写出来的背景图片  CSS编译出来的代码 会有好多重复的。

CSS编译代码 如下

解决办法：

用@each指令结合占位符来解决

CSS编译代码如下 

收获：

CSS3 @keyframes 规则

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

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

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

0％是开头动画，100％是当动画完成。

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

注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。.

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值 说明

animationname 必需的。定义animation的名称。

keyframes-selector 必需的。动画持续时间的百分比。

合法值：

0-100%

from (和0%相同)

to (和100%相同)

注意： 您可以用一个动画keyframes-selectors。

css-styles 必需的。一个或多个合法的CSS样式属性

许多关键帧选择器中添加一个动画：

@keyframes mymove

{

0%   {top:0px;}

25%  {top:200px;}

50%  {top:100px;}

75%  {top:200px;}

100% {top:0px;}

}

@-webkit-keyframes mymove /* Safari and Chrome */

{

0%   {top:0px;}

25%  {top:200px;}

50%  {top:100px;}

75%  {top:200px;}

100% {top:0px;}

}

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 转换元素定义透视视图。

值 说明

animation-name 指定要绑定到选择器的关键帧的名称

animation-duration 动画指定需要多少秒或毫秒完成

animation-timing-function 设置动画将如何完成一个周期

animation-delay 设置动画在启动前的延迟间隔。

animation-iteration-count 定义动画的播放次数。

animation-direction 指定是否应该轮流反向播放动画。

animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-play-state 指定动画是否正在运行或已暂停。

initial 设置属性为其默认值。 阅读关于 initial的介绍。

inherit 从父元素继承属性。 阅读关于 initinherital的介绍。