day09

A.今天学了什么

1配置webstorm的安装环境

//www.greatytc.com/p/c482c6ea0a4b

2.sass的语法

//www.greatytc.com/p/0f96f42b6924

2.1变量

$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
.header{
  margin-#{$place}:20px;
}

2.1计算功能

ody {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

3.版本控制

将代码上传到git中国或githun

动画animation

1.定义@keyframes

A.@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

B.@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

div{
 animation:myfirst 2s;
}
div{
 animation:myfirst 2s infinite;  //无限循环
}

1配置webstorm的安装环境

//www.greatytc.com/p/c482c6ea0a4b

2.sass的语法

//www.greatytc.com/p/0f96f42b6924

2.1变量

$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
.header{
  margin-#{$place}:20px;
}

2.1计算功能

ody {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

3.版本控制

将代码上传到git中国或githun

动画animation

1.定义@keyframes

A.@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

B.@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

div{
 animation:myfirst 2s;
}
div{
 animation:myfirst 2s infinite;  //无限循环
}

 动画