好看的模糊切换页效果

• 2020-03-14 制作一个模糊背景页的一个小Demo

• 其实在比较早之前有做过类似的功能，但是没有系统的总结过它的知识点，今天就记录一下模糊背景需要知道的知识点
• 源码在 https://gitee.com/jimmyxuexue/excellent_interface/tree/master/%E6%A8%A1%E7%B3%8A%E5%88%87%E6%8D%A2%E7%95%8C%E9%9D%A2
• 先上效果图
• 
• 
• 当鼠标移动到界面的时候，背景模糊恢复，改为文字模糊
• 当第一次看效果图的时候，很多小伙伴可能会理解成的页面结构是文字是图片背景元素的子元素，其实不是的，需要使用到定位，原因是我们使用到的背景模糊的css语句是filter:blur(),这个样式可以传递一个值，单位是px，像素越大，模糊的力度也就越大

• 值得注意的是这个属性嫁给一个元素以后，那个元素的子元素也会跟着一起模糊，可以理解成是继承吧，反正不是我想要的效果，所以我们就得使用定位的方式，背景元素和文字元素不是父子关系，这样就不会影响文字的变化

• 实现了前面的步骤以后，就只要做些鼠标移入以后filter:blur的值大小的变化就行了，为了过渡自然，当然还需要加上transition属性，会使得图片的过渡显得更加的圆滑好看