A.今天学了什么
1配置webstorm的安装环境
http://www.jianshu.com/p/c482c6ea0a4b
2.sass的语法
http://www.jianshu.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; //无限循环
}
B.今天学到了什么
1配置webstorm的安装环境
http://www.jianshu.com/p/c482c6ea0a4b
2.sass的语法
http://www.jianshu.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; //无限循环
}
C.今天没掌握什么
动画
