周末闲来无事，就想着做点东西练练手。又苦于自己 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. windows10下Anaconda的安装与tensorflow、opencv的安装与环境配置

    刚开始学习tensorflow和opencv这一块的知识,所以用博客这个平台来把自己这段学习的经历与感想写下来. tensorflow和opencv则用Anaconda来下载和配置环境. 下载Anac ...

  2. uncategorized SQLException for SQL []; SQL state [99999]; error code [17004]; 无效的列类型: 1111; nested exception is java.sql.SQLException: 无效的列类型: 1111

    WHERE 的条件取值时添加上jdbcType=NUMBER这样的配置 参考[1]:https://blog.csdn.net/fyhjuyol/article/details/45483167

  3. 《算法导论》— Chapter 6 堆排序

    序 本文主要介绍堆排序算法(HeapSort),堆排序像合并排序而不像插入排序,堆排序的运行时间为O(nlgn):像插入排序而不像合并排序,它是一种原地(in place)排序算法.在任何时候,数组中 ...

  4. 【HIHOCODER 1052 】基因工程（贪心）

    链接 问题描述 小Hi和小Ho正在进行一项基因工程实验.他们要修改一段长度为N的DNA序列,使得这段DNA上最前面的K个碱基组成的序列与最后面的K个碱基组成的序列完全一致. 例如对于序列"A ...

  5. 南宁2017ICPC总结

    ​    ​    ​     ​    ​ 南宁2017ICPC总结 第二次到南宁,高铁三个半小时好像没什么感觉了,广西的天气真的是又湿又冷,而且交通也及其不方面,所以对广西的印象也不是很好.这次承 ...

  6. xtu summer individual-4 B - Party All the Time

    Party All the Time Time Limit: 2000ms Memory Limit: 32768KB This problem will be judged on HDU. Orig ...

  7. FZU-2147-2147 A-B Game,规律题。。

    Problem 2147 A-B Game Time Limit: 1000 mSec Memory Limit : 32768 KB  Problem Description Fat brother ...

  8. POJ 1201 差分方程分析

    POJ 1201 给你N个闭区间.每个区间分别为[ai,bi],你必须在这个区间上至少取ci个不同的整数. 现要求所有区间满足各自的条件. 问最少需要选多少个点. 例如[3,7](3)  [8,10] ...

  9. hdu4135 Co-prime【容斥原理】

    Co-prime Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  10. IIS文件存在但报404问题解决

    遇到一个奇怪的问题,在IIS7.5中,一些样式和JS文件存在,但访问就是报404. 根据网上搜索到的解决方法,发现解决不了,不同同样的问题引起的. 网上解决: 1.没有配置合适的MIME信息,通过添加 ...