本仓库的 CSS 动画是在 100daycss 网站上去练习,完成的。
仓库里用的 CSS 用 Less 编译完成。
Less 介绍:Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
Less 安装:npm i less -g
Less 编译:lessc 文件名.less 文件名.css 如:lessc index.less index.css
Less 的使用(下面的例子仅供参考)
@color: white;
h1{
color: @color;
}
@fontSize: 24;
.Func(){
color: red;
// 字符串拼接
font-size: @fontSize * 1px;
}
h1{
// 调用函数, 导入样式
.Func();
}
// 编译后
h1{
color: red;
font-size: 24px;
}
// @index 作为函数的形参
.Func(@index) when (@index <= 8){
@nullBase: @index - 1;
.slice-@{index}{
background-position: @nullBase * -50px 0;
// transform: translateY(-40px);
opacity: 1;
}
// 递归调用
.Func(@index+1);
}
// 函数调用
.Func(1);
h1{
color: white;
height: 100px;
}
h2{
&:extend(h1); // 实现 h2 继承 h1 的样式
width: 200px;
}
css类名拼接:
.class@{变量名}
字符串拼接:
1)~'@{变量名}字符串' 或 ~'字符串@{变量名}'
如:~'@{index}dads'
2)e('@{变量名}字符串') 或 e('字符串@{变量名}')
如:e('dads@{index}')
像素 px 或时间秒 s 之类的单位拼接
width: @{变量名} + 50px;
transition: @{变量名} + 2s;
当直接用变量名表示整个单位时的拼接方式:
width: @{index} * 1px; 或 width: @{index} + 0px;
表示其他单位也类似。
而不能用下面这种方式
width: (@变量名 + 50) + px;
这样的编译结果是:
width: 50 px
单位和数字之间会出现空格,width无法生效。
还有就是这几种拼接方式不能相互替换,否则会报错:ParseError: Unrecognised input in....
// 该问题在文件 stars-42 里遇到,
// 随机设置 left 值,不过 less 的版本要求在 3 以下,3 以上好像用不了了,上网没找办法,有更好建议的欢迎留言
// 注意 Js 代码必须放在 ` ` 符号里,然后采用字符拼接的方式
left: ~"`Math.round((Math.random()*20+20)/10)`px"
// 或者单独把 Js 提取出来,声明一个变量保存
@num: `Math.round((Math.random()*20+20)/10)`;
left: ~"@{number}px";
大概先这些,后续接触了会持续更新哦,对文件中代码有更好建议的欢迎指出 (* ̄︶ ̄)