整理每日知识点2

1.CSS背景虚化背景

filter过滤：blur(模糊半径)   模糊半径越大，越模糊  

 background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  -webkit-filter: blur(20px);
  filter: blur(20px);
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);

(注：背景虚化会覆盖内容)

2.显示滚动条效果，隐藏滚动条

html样式：

js代码：

css样式：

3.设置第一个选项卡为被选中状态，点击其他选项恢复正常状态

（与上面一个是同一个代码的不同效果，都比较重要，在移动端使用频次比较高，知识点虽小，但是效果确实比较常见，最后使用js控制点击效果配合css样式的hover一起使用，js主要是设置显示第一个选项卡被点击状态，点击其他恢复，hover是点击后效果，目前看来使用还是挺方便的，大胆尝试新的方法，因为本身给代码设置了字体导致效果一直出不来，我删除了原有的样式，通过“点击后的css样式”和“未点击的样式”使用new和old，进行区别）

html代码：

js代码：

css样式：

 

4.页面的双向跳转

         由于使用路由跳转比较频繁，有点忘记怎么跳转了，趁热打铁，刚学到一个好用的跳转方式，赶紧记录下来！（后期准备对router相关的内容进行拓展）

index.js里面配置路由：

主页面html代码：

 主页面js代码：

 

子页面html代码：

子页面js代码：

5.如何旋转字体图标？

        （1）直接使用font-weight：550；是没用的，因为字体图标默认是550，改成600，可以达到加粗效果，这主要是为了应对在页面显示统一性

        （2）由于直接使用transform属性对iconfont图标进行旋转无效，我看了一下引用是使用span，span是行内样式，修改为行内块或者是块元素就可以旋转了。

例： transform: rotate(90deg);