css3+svg打造会呼吸的Google图标[原创]

_monalisa 2013-09-12 12:23:31

效果图如下：

Google图标通过html5的svg绘制,只支持Chrome、Safari浏览器。
静态的效果图看不出动画效果，请点击在线演示

...全文

186 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

CSS3即层叠样式表（Cascading Style Sheet），在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。本课程讲述了CSS3的实战应用，包括对网页修改以及对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

一、图标设计原则 1. 表意准确功能图标的第一原则是表意准确，要让用户看到图标第一时间就能理解它的含义。同时，功能图标还具有通用性，符合所有用户的使用习惯，不要试图去改变用户日积月累沉淀下来的记忆。微信底部的 Tab栏，已经很多年没换过了，由于微信用户群体庞大、机构复杂，牵一发而动全身，谁也不敢随便的改变用户多年积累的认知记忆。可能从美观角度还有很大的发挥空间，但是用户更多的会认为，熟悉的就...

而宽度 100% 是相对于它的父标签来的，如果我们改变了它父标签的宽度，那 main 的宽度也就会变——比如我们把浏览器窗口缩小，那 container 的宽度就会变小，而 main 的宽度也就变小，但它的实际宽度 100% - 320 始终是不会变的。起初，伪元素的前缀使用的是单冒号语法，但随着 Web 的进化，在 CSS3 的规范里，伪元素的语法被修改成使用双冒号，成为 ::before、 ::after。优点：速度快，所有的 CSS 控制都是针对本页面标签的，没有多余的 CSS 命令；

对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

前言本文讲解前端面试的 CSS 的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！注意：文章的题与题之间用下划线分隔开，答案仅供参考。笔者技术...

61,115

社区成员

60,728

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章