CSS学习笔记（5）

1.过渡

当设置发生某些动作时,元素的状态发生变化,可以对这个变化的过程加以修饰,就是过渡;

比如设置box1是box2的父元素,给box2设置属性后,再给鼠标选中状态的box2设置属性,这样在鼠标选中box2后就会发生过渡;

设置过渡transition有property(设置发生过渡的属性,多个属性间用','隔开,可用all代表全部)duration(设置过渡持续的时间) 

timing-fuction(设置时序函数

默认值ease 慢开始,加速再减速

ease-in-out 先加速后减速

ease-out 减速

ease-in 加速

cubic-bezier()手动设置函数

四个值分别是两个点的坐标

steps(xxs,end/start)设置分布执行过渡效果

设置step后过渡不再连续,设过渡时间2s,分两步完成,1步1s,通过end或者start来设置是在1s末还是1s初瞬间完成变换;

)

transition-delay设置过渡效果的延时时间

transition的简写:无顺序要求,但要求持续时间在延迟时间之前

2.动画

与过渡的区别之一是可以自动播放

这时要设置关键帧,实际上是把状态的变化封装到了一起,然后给元素应用来自动播放

单独创建@keyframes+名字{

from(0%){状态}

to(100%){结束状态}

---------------------------------------

也可以使用分组

如0%{}

33%,100%{}

66%{}

} ;

***********************************************

设置完关键帧后再在具体元素中应用

animation-name:xxxx(此时应用此关键帧)

animation-duration动画持续时间

animation-delay动画延迟时间

animation-timing-fuction时序函数

animation-iteration-count动画执行的次数 infinate是无限执行

animation-dirction表示动画执行的方向 默认值normal是从from到to运行,reverse是反向执行,alternate是反复执行,altermate-reverse是反向反复执行

animation-play-state(动画运行状态):running pause

animation-fill-mode(动画的填充形式):none(默认值,动画结束时回到原来位置) forwards(动画结束后停留在结束位置) backwards(动画延时等待时,会变为开始位置的状态) both(结合for和bac)

animation简写:无顺序,但要求持续时间在延迟时间前

2.transform属性

a.变形平移

 x/y/z轴平移:相当于开启相对定位,不会脱离文档流.但可以随意移动且不会对布局产生影响;

原点是本身原来的位置,设置位移时可以设置像素也可以设置百分数(相当于其自身),可以利用百分数设置水平居中,比如左侧50%宽度,然后设置自身50%向左平移,可以使得其在填入文字时自动保持居中;

使用标签translate:X/Y/Z:()开启平移;

特殊地,当开启z轴平移时(z轴平移属于立体效果,默认情况下网页不支持透视),只有设置视距才能发生变化(在html中设置perspective:xxx);

b.旋转

过渡和动画都可以应用rotateX/Y/Z(xxedg/xx%/xxturn)来设置沿某轴的旋转

backface-visibility:visable或者hidden(是否显示背面);

c.缩放

scaleX/Y/Z()或者scale()表示双方向缩放

使用overflow-hidden隐藏溢出

z轴缩放在平面上没效果,当旋转后能体现效果

d.设置变形原点

transform-orgin:默认变形原点是center即元素的中心,也可以自己设置

e.设置3d效果

transform-style:preserve-3d;

3.less简介

 less是对css的扩展和加强,语法基本与css一致,但写less文件时需要编译转化为css文件;

4.less语法

(1).//less注释不会被写到css中,

/**/css注释会写到css中

(2).设置格式时less可以直接用{}嵌套设置祖先后代元素属性

(3).less中可以设置变量

语法:@变量名:变量值;

当是数值时直接@变量名来使用

当变量是类时设置样式要@(变量名){}

变量的使用时就近原则,当名变量重复赋值时,使用距离其最近的数值或者使用时没定义变量,在下面定义的变量也可以使用;

$+属性名可以直接引用变量;

(4).父元素和扩展

.box1{

.box2{}

&{}

>box3{}

}

. .是后代选择器,.>是子元素选择器,&代表上一层的父元素;

********************************************************************************

extend扩展(相当于继承)

.p2:extend(p1){}这时p2会继承p1已经设置好的样式;

或者.p1{

.p2();或者.p2;

}这里对p2的样式进行了引用,相当于把p2的样式进行了复制(mixin混合);

也可以提前设置mixin混合

.p2(){样式}(与常规选择器的区别是多了小括号,这时p2不会在css中出现,只是作为mixin的混合后备);

(5.)混合函数.test(参数){}

可以直接在具体元素中套用如div{ .test(参数);}

参数可设置默认值,传参时按顺序不能少,如果加上了名字传参可以不按顺序;

类似的也用一些可以直接套用的封装函数;

(6)补充

less可以直接进行运算

import可以引用其他less文件;