知乎最多支持答案的黄色渐隐效果

常逛知乎的人会熟悉,在知乎PC客户端上面支持最多的(貌似还要达到一定数量)的答案在页面刚加载完的时候会有一个黄色背景渐隐的效果。其实这个做法是很久之前在互联网上看到的一个demo实现了这个效果,当时没注意,今天想起来自己写一下js实现方式。

js代码:

 1 var x = 0;
 2 function changecolor(){
 3   var y = '#ffff'+ x;
 4   document.body.style.background= y;
 5   x += 10;
 6   if(x>90){document.body.style.background= '#fff';return;}
 7   setTimeout(changecolor,200);
 8 
 9 }
10 changecolor();

其中,在changecolor函数内部调用自己以便通过x的值控制计时器的触发和函数跳出。颜色代码方面由于使用十六进制的值,所以没能在y值上面直接过渡到白色,而是偷了个懒在跳出的时候将色值手动赋值为白色。只是展示个大体思路,细节还需雕琢,如有更好方案,欢迎留言。

css3的animation实现方法:

css代码:

1 body{
2 background:yellow;  
3 animation:changecolor 1s;
4 }
5 @keyframes changecolor{
6 from{background:yellow;}
7 to{background:white;}
8 }

使用时注意对应添加浏览器厂商的前缀。

posted @ 2014-10-28 17:14  杜偉  阅读(292)  评论(0)    收藏  举报