今天和大家分享一下使用 CSS3 绘制腾讯 QQ 的企鹅 Logo 的过程。
一、如何使用 CSS3 来绘制图形？
网络上经常能够看到一些用 CSS3 绘制的精致图形，它们通常由矩形，圆形，椭圆，三角形, 梯形等组合而成。要想绘制我们自己的图形，就要先了解下基本图形的绘制方法了。
对于前端开发来说, 知道整个页面从开始加载到有内容展示出来的时间是很重要的事情.
通常我们要知道页面加载的时间的话. 是采用计算几个关键的时间点的方法来得出页面加载的时间. 但是这个方式存在一些问题, 比如: 我们不知道浏览器在开始解析页面之前卸载前一个文档, 解析 dns 的时间.
介绍前，先说下背景。在前端开发中，有时会为页面绑定 resize 事件，或者为一个页面元素绑定拖拽事件（其核心就是绑定 mousemove），这种事件有一个特点，就是用户不必特地捣乱，他在一个正常的操作中，都有可能在一个短的时间内触发非常多次事件绑定程序。而大家知道，DOM 操作时很消耗性能的，这个时候，如果你为这些事件绑定一些操作 DOM 节点的操作的话，那就会引发大量的计算，在用户看来，页面可能就一时间没有响应，这个页面一下子变卡了变慢了。甚至在 IE 下，如果你绑定的 resize 事件进行较多 DOM 操作，其高频率可能直接就使得浏览器崩溃。
以下两行语句有什么区别？
|
1 2 |
<div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(40deg);"> |
|
1 2 |
<div id="animateTest" style="-webkit-transform: rotateY(40deg) perspective(400px);"> |
如果大家不清楚，请听我娓娓道来。
CCS3 中的 Transform 是设置界面样式和动画的一大利器。而且在 Chrome 和 FF 中还支持 3D 变换。IE9 不支持，IE10 支持。
做 Web 开发很多年了，专门做 Web 前端开发也有 8 年多了，期间自然加过很多优秀的 Web 前端 QQ 讨论群，今天跟大家推荐一个传说中氛围最好的一个，而且其中很多牛人，那就是——鬼懿 IT
今天和大家分享一下使用 CSS3 绘制腾讯 QQ 的企鹅 Logo 的过程。
网络上经常能够看到一些用 CSS3 绘制的精致图形，它们通常由矩形，圆形，椭圆，三角形, 梯形等组合而成。要想绘制我们自己的图形，就要先了解下基本图形的绘制方法了。
《parctical common lisp》的作者曾说，如果你需要一种模式，那一定是哪里出了问题。他所说的问题是指因为语言的天生缺陷，不得不去寻求和总结一种通用的解决方案。
不管是弱类型或强类型，静态或动态语言，命令式或说明式语言、每种语言都有天生的优缺点。一个牙买加运动员， 在短跑甚至拳击方面有一些优势，在练瑜伽上就欠缺一些。
享元模式主要用来减少程序所需的对象个数. 有一个例子, 我们这边的前端同学几乎人手一本《javascript 权威指南》. 从省钱的角度讲, 大约三本就够了. 放在部门的书柜里, 谁需要看的时候就去拿, 看完了还回去. 如果同时有 4 个同学需要看, 此时再去多买一本.
在 webqq 里面, 打开 QQ 好友列表往下拉的时候，会为每个好友创建一个 div( 如果算上 div 中的子节点, 还远不只 1 个元素 ).
职责链模式是一个对象 A 向另一个对象 B 发起请求，如果 B 不处理，可以把请求转给 C，如果 C 不处理，又可以把请求转给 D。一直到有一个对象愿意处理这个请求为止。
打个比方，客户让老板写个 php 程序。老板肯定不写，然后老板交给了部门经理。部门经理不愿意写，又交给项目经理。项目经理不会写，又交给程序员。最后由码农来完成。
备忘录模式在 js 中经常用于数据缓存. 比如一个分页控件, 从服务器获得某一页的数据后可以存入缓存。以后再翻回这一页的时候，可以直接使用缓存里的数据而无需再次请求服务器。
实现比较简单，伪代码：
Copyright © 2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2
HTML5 梦工场
推荐使用 Coding.net