周末闲来无事，就想着做点东西练练手。又苦于自己 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. VW结合rem进行移动端布局

    ---恢复内容开始--- html { font-size:10vw: } div { width: 1rem; height: 1rem; } VW这个单位适合用来适应不同设备的 一个设备的宽度就为 ...

  2. NTP服务和DNS服务

    1.NTP时间服务器 作用:NTP主要用于对计算机的时间同步管理操作 1.1  NTP部署 服务端:192.168.16.6 客户端:192.168.16.7 [root@localhost ~]# ...

  3. 为什么在属性中设置private set

    引言: 属性的引入来自C#的封装机制,也就是说对象的内部数据不应该由对象实例来直接访问,我们可以使用传统的Get和Set方法,来封装字段,C#为我们提供了语法糖,也就是属性.属性包括get和set,分 ...

  4. c#导出word文档

    为方便下次遇到不知道去哪找先把它存放在这里,以下是保存导出word主要类方法 public class BiultReportForm { /// <summary>word 应用对象 & ...

  5. luogu3313 [SDOI2014]旅行

    对每一个宗教建一棵线段树,然后树剖搞搞 #include <iostream> #include <cstdio> using namespace std; int n, m, ...

  6. 【MVC 2】MVC+EF框架结构实例：注册ID号验证

    导读:本篇博客,将通过一个实例,详细介绍MVC+EF的应用.原理性的东西或者说是进一步的解耦和,请看博客: [框架结构 3]MVC+EF实体框架-原理解析.在这里,仅用MVC框架和一个EF生成的Mod ...

  7. HackerRank# Wet Shark and Two Subsequences

    原题地址 对于给定的两个约束条件,可以通过联立方程组直接解出子序列A的和和子序列B的和,即sum(A) = (r + s) / 2,sum(B) = (r - s) / 2,假设|A|=|B|=n 所 ...

  8. ie6 js报错汇总

    假如ie6是一个非美女的人,那不知道为多少人乱刀砍多少次,假如不幸它是一个美女,那不知道要被多少人轮奸完之后还是乱刀砍死. ie6的js的错误说明总是很隐晦的,它喜欢和捉迷藏.报的行数和错误,常常不知 ...

  9. C#路径，文件，目录，I/O常见操作汇总

    原文发布时间为:2008-10-25 -- 来源于本人的百度文章 [由搬家工具导入] 路径，文件，目录，I/O常见操作汇总 摘要:     文件操作是程序中非常基础和重要的内容，而路径、文件、目录以及 ...

  10. iOS 调用系统相册 相机 时，显示中文标题

    解决手机语言已经设置显示中文 在调用系统相册.相机界面 时显示英文问题, 在 info.plist里面添加Localized resources can be mixed YES 表示是否允许应用程序 ...