周末闲来无事，就想着做点东西练练手。又苦于自己 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. 03pandas

    一.pandas简述 1)pandas是一个开源的,BSD许可的库,为Python编程语言提供高性能,易于使用的数据结构和数据分析工具. 2)numpy能够帮助我们处理数值,但是pandas除了处理数 ...

  2. P2756 网络流解决二分图最大匹配

    P2756 飞行员配对方案问题 题目背景 第二次世界大战时期.. 题目描述 P2756 飞行员配对方案问题 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语 ...

  3. UVa-340-猜数字

    #include <stdio.h> char ans[1000],gus[1000]; int num[10]; int main() { int n,cnt=1; while (sca ...

  4. Centos7中 mysql5.7 用户 创建 、授权、远程登录

    1.添加用户跟以往版本不同,MySQL5.7 mysql.user表没有password字段,这个字段改成了 authentication_string:这里我们使用命令进行创建用户:  CREATE ...

  5. Python处理PDF-通过关键词定位-截取PDF中的图表

    起因: 因为个人原因, 这些天了解了一下Python处理PDF的方法. 首先是PDF转txt, 这个方法比较多, 这里就不再赘述, 主要聊一下PDF中的图片获取. 这里用我自己的例子, 不过具体情况还 ...

  6. Java自动生成asmx的webservice代码

    第一种方式:针对CXF自动生成的代码对响应类大小写区别问题,可以使用此方法. 工具为Eclipse. 新建Web Service Client. 输入地址点击finish即可自动生成. 调用方式: p ...

  7. LeetCode（16）3Sum Closest

    题目 Given an array S of n integers, find three integers in S such that the sum is closest to a given ...

  8. 软件测试人员遇到发现的bug不能重现怎么办？

    软件测试人员遇到发现的bug不能重现怎么办?   刚刚进入测试的童鞋们,想必都遇到过提出的bug,开发要求重现之后,但是在系统上已经重现不了的情况吧. 那么碰到这样的情况,不管开发还是测试都很纠结,开 ...

  9. 【Kubernetes】Kubernetes删除namespace后持续terminating状态

    删除isti和foo的配置文件之后,namespace持续terminating状态,此时也无法再创建istio-system的namespace namespace "istio-syst ...

  10. 最近切的两题SCC的tarjan POJ1236 POJ2186

    两题都是水题,1236第一问求缩点后入度为0的点数,第二问即至少添加多少条边使全图强连通,属于经典做法,具体可以看白书 POJ2186即求缩点后出度为0的那个唯一的点所包含的点数(即SCC里有多少点) ...