周末闲来无事，就想着做点东西练练手。又苦于自己 PS 水平太差，设计不出什么好看的东西。

干脆就在 Dribbble 上逛一逛，看看有什么看起来比较屌的，实际上却很简单的东西。

一共做了 3 个，均已上传到 Github，欢迎交流和学习。

https://github.com/weilao/Mailman-Icon

https://github.com/weilao/Moon-Graphic

https://github.com/weilao/Sometime-Welcome

当然，为了今天的内容能够更丰富一点，下面还会附上 Mailman Icon 开发全程录像，欢迎点评。

这是 Dribbble 原图

个人比较喜欢这种简单又好看的小动画，开发难度不大，但效果却十分给力。

开发全流程(3倍速)

【CSS3动画实战】Mailman Icon的更多相关文章

  1. css3动画机制原理和实战

    这段时间喜欢上css3动画效果了,关于这个每个人都有不同的看法,在我个人看来css3在做一些小页面的动画效果还是很好用的,一些简单的小动画要是用js的话,未免浪费. 要是做大一点的话最好js+css3 ...

  2. css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用

    <!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...

  3. 一个栗子上手CSS3动画

    最近杂七杂八的事情很多,很多知识都没来得及总结,是时候总结总结,开启新的篇章- 本篇文章不一一列举CSS3动画的属性,若需要了解API,可前往MDN 在开始栗子前,我们先补补基础知识. css3动画分 ...

  4. css3组件实战--绚丽效果篇

    代码地址如下:http://www.demodashi.com/demo/11656.html 一.3D风景动态骰子 在线演示 1.css3D.动画基础知识预备 2.创建一个3D场景 先放置一个.bo ...

  5. 如何快速上手基础的CSS3动画

    前言 说起CSS3动画,就必须说说 transform,translate,transition,animation这4个属性,transform主要定义元素的动作,比如旋转.倾斜.位移等,trans ...

  6. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  7. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  8. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  9. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

随机推荐

  1. day22 02 面向对象的交互

    day22 02 面向对象的交互 一.三种编程方式 1.面向过程编程:核心是过程,流水线式思维 优点:极大降低了写程序的复杂程度,只需要顺着要执行的步骤,堆叠代码即可 缺点:一套流水线或者流程就用来解 ...

  2. python基础——4（数字、字符串、列表类型的内置方法介绍）

    目录 一.可变与不可变类型 二.数字类型 三.字符串类型 四.列表类型 一.可变与不可变类型 可变类型:值改变,但是id不变,证明就是在改变原值,是可变类型 不可变类型:值改变,id也跟着改变,证明产 ...

  3. python基础——3（流程控制）

    一.if判断 1.语法一: if 条件: 子代码块 示例代码: sex = 'female' age = 18 is_beautiful = True if sex == 'female' and a ...

  4. String类型根据逗号分隔转为list

    String ids = pd.getString("IDS");//从pd里取出字符串 List idList = Arrays.asList(ids.split(", ...

  5. ul标签中，li标签的移除、属性值获取

  6. loadrunner 场景设计-手工场景设计

    概述 通过选择需要运行的脚本,分配运行脚本的负载生成器,在脚本中分配Vuser来建立手工场景 手工场景就是自行设置虚拟用户的变化,主页是通过设计用户的添加和减少过程,来模拟真实的用户请求模型,完成负载 ...

  7. POJ2479【DP 枚举】

    题意:给出一串数字,求出其中不重不交的两个子串的和的最大值 思路:最近最大子串和做多了,感觉这题有点水.枚举分割点,将序列分成左右两串,然后看左右串的最大子串和的最大值. //poj2479 #inc ...

  8. 潜伏者（codevs 1171）

    题目描述 Description [问题描述]R 国和S 国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动.历尽艰险后,潜伏于 S 国的R 国间谍小C 终于摸清了S 国军用密码的编码规则:1． ...

  9. loadrunner 并发操作集合点配置

    在loadrunner的虚拟用户中,术语concurrent(并发)和simultaneous(同时)存在一些区别,concurrent 是指虚拟场景中参于运行的虚拟用户.而simultaneous与 ...

  10. Codeforces936D. World of Tank

    $n \leq 1e9$,$n*2$的网格里有$m_1+m_2 \leq 1e6$个障碍物,现有一坦克从$(0,1)$出发要到$(n+1,1/2)$,他每秒可以换行(纵坐标1变2或2变1)也可以发炮弹 ...