IFE2017 有趣的鼠标悬浮知识点
1.background属性
background作为一个经常用的css属性。还是挺重要的。通常以下几个属性
- background-color
background-color : 颜色
- background-image
background-image : url(背景图片的地址)
- background-repeat
background-repeat : repeat | no-repeat | repeat-x/y
- background-position
background-position : top/bottom/left/right(组合使用) | x% y% | x y
// 当只设置了一个position值（top或其他），第二个值自动为center
// 当只设置了第一个值（x%|x px），第二个值自动为50%；
- background-attachment
// scroll（默认值）背景图像会随着页面其他部分的滚动而移动
// fixed 当页面其余部分滚动时，背景图像不会移动！
以上是css3之前的background属性
- background-clip
background-clip顾名思义。就是背景裁剪，规定背景的绘制区域
background-clip:border | padding | content | text;
// border : 背景从边框开始绘制，但是边框会cover背景
// padding ：背景从padding部分开始绘制，留下padding+content的背景
// content ： 只留存content的背景，。
// text ：只留下字体的背景。
- background-origin
background-origin : border | padding | content
// border : 背景从边框开始铺设
// padding：背景从padding开始绘制
// content ： 背景只铺设内容部分
- background-size
background-size : length | % | cover | contain
// length | %
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
// cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
// contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全**适应**内容区域。但是会留空
origin 和 clip 的区别
2. transfrom
可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素 ，他有几个
属性值参数：rotate（旋转） | translate（位移？） | scale（伸缩） | skew（扭曲） | matrix。
transfrom : rotate（90°deg）； 正角度则顺时针
transfrom : translate(X,Y);
transfrom : translateX/Y(100px | 100%);
transfrom : scale(x,y)
transfrom ：scaleX/Y
//如果只有一个值，则第二个参数同第一个一样
transfrom : skew(x,y);
//x对应X轴，y对应Y轴。如果第二个数不提供，则默认为0
transfrom : skewX/Y();
改变基点的函数
transfrom ：oringin（x%,y%）
3. transition 过渡
transition-property :
//要使用过渡的属性值
transition-duration :
//过渡持续的事件 1s 1000ms
transition-timng-function :
//变换速率函数：ease（逐渐变慢） | linear（匀速） | ease-in（加速） | ease-out （减速）| ease-in-out（先加速后减速）
transition-delay :
//过渡动画延迟x s，x ms 开始
速记法
transition ： property duration timing-function delay
例子
.class {
...
...
transition : width 1s linear .5s
}
.class:hover{
width: 200px;
}
4.animation
1）关键帧
@keyframes 动画名称{
0%{
background-color: black;
}
50%{
background-color: red;
}
100%{
background-color: yellow;
}
}
transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
2）animation属性
animation-name ： ‘str’
//自定义的动画名，需要跟关键帧后面的动画名称相一致
animation-duration :
//一次动画持续的时间，s | ms
animation-timing-function : ease | linear | ease-in | ease-out | ease-in-out
// 速率函数
animation-delay
// 过渡动画延迟x s，x ms 开始
animation-iteration-count :
//动画循环的次数
animation-direction：
//定义动画执行的方向
// normal 正方向，一次动画执行完毕后，又从头开始继续执行
// alternate 双向。动画播放在第偶数次向前播放，第奇数次向反方向播放。
animation-play-state：running | paused
//用来控制动画的播放状态
速记：
animation ： name duration timing-function delay iteration-count direction
eg：
animation ： ‘btnlight’ 2s linear .5s 10 alternate;
example
.class{
...
...
animation : "circleRotate" 4s linear .5s 10 alternate;
}
@keyframes "circleRotate"{
0%{
transform: rotate(0deg);
}
50%{
transform : rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果
其他知识点：
css属性
filter：blur（？px）；
//用于图片上，是图片模糊.
解决方式
1.鼠标hover时，border从中间向两边延伸
2.流光字体的制作
流光字体的制作主要用到以下几个属性。
bakcground ：linear-gradient（）；
// 渐变背景
bakcgorund-clip ：text；
background-size ：
background-position：
animation：
3.背景模糊
filter: blur(5px);
JS小知识点
element.classList 一个元素的类属性的实时DOMTokenList集合。
element.classList = elemet.className.split(' ');
element.classList本身是只读的，但是可以通过add（）和remove（）方法修改它；
let elementClasses = element.classList();
element.Classes.add('someClass');
element.Classes.remove（'someClass');
element.Classes.contains('someClass');
// 主要是下面这个方法
element.Classes.toggle(1,2);
//toggle用于判断element.classes是否存在某个类名。
//如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。
例子
btn.onclick = function(e){
e.classList.toggle('addColor');
}
//当按钮被点击时，如果按钮存在了类‘addColor’，则从元素中删除这个类名，如果不存在，则添加！