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

_monalisa 2013-09-12 12:23:31

效果图如下：

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

...全文

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

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

原文：Pro CSS3 Animation 协议：CC BY-NC-SA 4.0 五、CSS3 关键帧动画对于在两种状态之间创建简单的元素动画，CSS 转换很容易实现和使用，但是这种简单性有几个明显的限制。为了创建更复杂的动画，你需要 CSS 动画模块。我将 CSS 动画模块创建的动画称为关键帧动画，以进一步区分它们和过渡。如果您更熟悉 Flash 之类的动画工具，或者来自视频或电影背景，CSS 关键帧动画使用的基于时间的“无帧”方法一开始可能会有点混乱。为了确保每个人都有相同的理解，我将定义关键帧

【HTML5 和 CSS3 入门:Web Evolved 面向任何具有 HTML 和 CSS 基础知识的人。如果你最近刚刚涉足 HTML 或 CSS 的世界，或者如果你已经开发网站很多年了，这本书会有适合你的内容。然而，如果你已经玩过 HTML5 和 CSS3，但还没有完全理解它所提供的一切，你将会从这本书中获得最大的收获。这本书充满了实用的、真实的建议和例子，可以帮助你掌握现代网络标准。我们每天都在使用标准，却常常没有意识到这一点。

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

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

前言本文讲解前端面试的 CSS 的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！注意：文章的题与题之间用下划线分隔开，答案仅供参考。笔者技术博客首发地址 GitHub，欢迎关注。CSS盒子模型的理解 ?标准模式和混杂模式(IE)。在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止...

61,128

社区成员

60,711

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章