开博第一件事-模糊你的视野

开通博客的第一件事，就是让自己博客的头部慢慢高斯模糊，23333

好了，说说怎么做到的吧！

原理其实很简单，就是用了css3的动画效果，让头部慢慢的高斯模糊

说下这里为什么我一开始就要设滤镜模糊0.1，因为当我设为none，或者blur（0px）时，文字会出现抖动的情况，而设为0.1这种效果接近于0,又不会出现抖动

代码如下：

#header{animation: myfirst 10s;  -webkit-animation: myfirst 10s;animation-iteration-count:infinite; animation-direction:alternate;-webkit-transform-style: preserve-3d;transform-style: preserve-3d; -webkit-backface-visibility: hidden;backface-visibility: hidden; /* Safari 与 Chrome */}
@keyframes myfirst
{
    0%{-webkit-filter: blur(0.1px); /* Chrome, Safari, Opera */   filter: blur(0.1px);backface-visibility: hidden;}
        25%{-webkit-filter: blur(0.1px); /* Chrome, Safari, Opera */   filter: blur(0.1px);backface-visibility: hidden;}
    100%{-webkit-filter: blur(1px); /* Chrome, Safari, Opera */  filter: blur(1px);backface-visibility: hidden;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%{-webkit-filter: blur(0.1px); /* Chrome, Safari, Opera */  filter: blur(0.1px);backface-visibility: hidden;}
         25%{-webkit-filter: blur(0.1px); /* Chrome, Safari, Opera */   filter: blur(0.1px);backface-visibility: hidden;}
    100%{-webkit-filter: blur(1px); /* Chrome, Safari, Opera */  filter: blur(1px);backface-visibility: hidden;}
}