浏览器渲染
![](https://img.haomeiwen.com/i7304548/1e8bb74d0551eb71.png)
前端图片优化
![](https://img.haomeiwen.com/i7304548/b5cf377bf2158737.png)
图片格式的区别
![](https://img.haomeiwen.com/i7304548/7560755203c73ad4.png)
px 与 em 区别
![](https://img.haomeiwen.com/i7304548/dcbab6c7acf60c07.png)
jQuery中ajax的4种常用请求方式:
1.$.ajax()返回其创建的 XMLHttpRequest 对象。
![](https://img.haomeiwen.com/i7304548/bbf141999e598157.png)
2.通过远程 HTTP GET 请求载入信息。
![](https://img.haomeiwen.com/i7304548/297dd6d444d16382.png)
3. 通过远程 HTTP POST 请求载入信息。
![](https://img.haomeiwen.com/i7304548/1153bac35e11f4b5.png)
4.通过 HTTP GET 请求载入 JSON 数据。
![](https://img.haomeiwen.com/i7304548/8f483b135e478c9f.png)
文字抖动效果
链接:https://jsbin.com/qosugepuqo/edit?html,output
![](https://img.haomeiwen.com/i7304548/6e45fbba7585c55a.png)
hover后抖动
CSS代码
@-moz-keyframes tada{
0%{-moz-transform:scale(1);}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-moz-transform:scale(1.2) rotate(3deg);}
40%,60%,80%{-moz-transform:scale(1.2) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);}
}
@-webkit-keyframes tada{
0%{-webkit-transform:scale(1);}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-webkit-transform:scale(1.2) rotate(3deg);}
40%,60%,80%{-webkit-transform:scale(1.2) rotate(-3deg);}
100%{-webkit-transform:scale(1) rotate(0);}}
.doudun:hover{
-webkit-animation: tada 1s .2s ease both;
-moz-animation: tada 1s .2s ease both;
}
https://jsbin.com/fehidewaze/2/edit?html,output
![](https://img.haomeiwen.com/i7304548/93e08c1e19593478.png)
网友评论