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

    1.什么是React? a.React 是一个用于构建用户界面的 JAVASCRIPT 库. b.React主要用于构建UI,很多人认为 React 是 MVC 中的 V. c.React 起源于 F ...

  2. 2011 luogu P1311 选择客栈

    题目描述 丽江河边有 nn 家很有特色的客栈,客栈按照其位置顺序从 1 到 n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),且每家客栈都设有一家咖啡店,每家咖 ...

  3. 客户端和服务器最多能发送和接收多少TCP连接数？

    1. 对于服务器,每一个tcp连接都要占一个文件描述符,一旦这个文件描述符使用完了,就会返回错误. 我们知道操作系统上端口号1024以下是系统保留的,从1024-65535是用户使用的.由于每个TCP ...

  4. DB2数据库在线备份还原

    DB2在线备份设置方法: 第一步:开启归档日志 db2 update db cfg for TEST_DB  using logretain on 第二步:重启数据库 第三步:进行一次离线备份 db2 ...

  5. Ubuntu、CentOS 解决docker命令权限问题（sudo）

    #创建docker组 weiyj@ubuntu18:~$ sudo groupadd docker groupadd: group 'docker' already exists #将当前用户加入do ...

  6. linux常用过滤日志命令

    #过滤nginx访问日志awk '{print $1}' /var/log/nginx/access.log | sort | uniq -c | sort -nr -k1 | head -n 10 ...

  7. Java：获取IP地址

    文章来源:https://www.cnblogs.com/hello-tl/p/9139323.html import java.net.InetAddress; import java.net.Un ...

  8. python基础知识01-数据类型和序列类型

    %,取余 //,取整,向下取整,5//2 = 2. 一.变量类型 1.变量名不能以数字开头,不能纯数字,不要用汉字,可以用下划线开头 2.数值类型(int,float,bool,complex) ​ ...

  9. LeetCode（237）Delete Node in a Linked List

    题目 Write a function to delete a node (except the tail) in a singly linked list, given only access to ...

  10. STM32定时器的两个小难点

    TIM1 TIM8 挂在APB2上 一般为72M 也即APB2分频系数为1其余TIMER可以认为都挂在APB1上,一般为36M 也即APB1分频系数为2 或者更大 至少为2 APB1不能超过36M定时 ...