这篇大部分是转载,来自《高大上的 CSS 效果：Shape Blobbing》和 《Shape Blobbing in CSS》 有部分是自己理解和整理，配合效果要做出 apple wathc 的一个效果（见最后）

CSS3 给我们带来了一波又一波的技术革新，而我们似乎对它所能创造的效果又知道的太少太少，放大缩小什么的只是个开始，今天我们就讲讲上图中的新特效：Shape Blobbing。


原文在 CSS Tricks，这里只做一下简单的归纳，下面是我根据原文做的一个 Demo，现在貌似只支持 webkit 浏览器~~。

原理非常简单，就是用 filter 给元素同时加上 blur 和 contrast
blur 我们知道，就是模糊，contrast 貌似是对比度的意思。



通过上面两张图我们就可以明白其原理了，就是先将元素模糊，然后用对比度将其“收缩”回去。

后记，css动画，在Mac Safari下面是有问题的，不能自己动，最好的体验是chrome。 个人觉得时 Mac 10.10 是为了省电，哇哈哈。

给几个 老外骚年做的dome

请在chrome下欣赏

http://codepen.io/alexzaworski/pen/qDokc
http://codepen.io/anon/pen/JxnoF
http://codepen.io/chuckneely/pen/eHyhx
http://codepen.io/bali_balo/pen/zuaHg

跑这些例子的时候，我的老Mac风扇已经叫个不停了。

[转载] 高大上的 CSS 效果：Shape Blobbing的更多相关文章

  1. CSS 效果汇总

    只要决心够, 就能征服痛苦. 把一些常用的 CSS 效果记录下来 1. 利用 z-index :hover 显示层 github 效果地址>> 此效果主要利用 a:hover 来改变 sp ...

  2. CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  3. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

  4. 转载：HTML/CSS 速写神器：Emmet

    转载在http://bubkoo.com/2014/01/04/emmet-a-toolkit-for-improving-html-css-workflow/ 在前端开发的过程中,一个最繁琐的工作就 ...

  5. CSS效果集锦（持续更新中）

    高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...

  6. 几个简单实用的css效果

    1.要使按钮具有3D效果,只要将它的左上部分边框设置为浅色,右下部分边框设置为深色即可. eg:#button { background: #888; border: 2px solid; borde ...

  7. 一些常用的html/CSS效果---小技巧

    我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...

  8. 问题：贴友关于CSS效果的实现

    今日在百度贴吧中,一贴有提出如下问题: 对于这个问题,咱们贴上代码看效果 1: <html> 2: <head> 3: <meta http-equiv="co ...

  9. html 和css 效果--整理集合篇

    一.如何用一张图片做背景图,并且图片自适应div的大小 background: url("../stu_wengu.png") center center no-repeat; b ...

随机推荐

  1. SQL中Truncate的用法（转）

    转自:http://www.studyofnet.com/news/555.html 本文导读:删除表中的数据的方法有delete,truncate, 其中TRUNCATE TABLE用于删除表中的所 ...

  2. SQL Performance Improvement Techniques（转）

    原文地址:http://www.codeproject.com/Tips/1023621/SQL-Performance-Improvement-Techniques This article pro ...

  3. <转>java中静态方法和非静态方法的存储

    Java中非静态方法是否共用同一块内存? 将某 class 产生出一个 instance 之后,此 class 所有的 instance field 都会新增一份,那么所有的 instance met ...

  4. UVA 11214 Guarding the Chessboard

    题意: 皇后防御的范围是他所在横.竖.对角线,地图上的#为可以放旗子的地方.问最少放几个皇后能防守所有#. 分析: vis数组开4维,对应行.列.主对角线.副对角线 代码: #include < ...

  5. http协议说明

    今天公司有同事让我给他讲一讲http..然后自己写了一个示例代码,这如果都看不懂.那我也没办法了.... <?php //这里服务器以apache举例.nginx.iis.他们实际上处理方式的都 ...

  6. Python爬虫实战（4）：豆瓣小组话题数据采集—动态网页

    1, 引言 注释:上一篇<Python爬虫实战(3):安居客房产经纪人信息采集>,访问的网页是静态网页,有朋友模仿那个实战来采集动态加载豆瓣小组的网页,结果不成功.本篇是针对动态网页的数据 ...

  7. Azure上Linux虚拟机Mac地址的持久化

    有些用户在使用Azure Linux 虚拟机安装软件时,有些软件的license会和当前系统的mac地址绑定,那么在Azure VM重启,reszie(改变尺寸大小),停止然后再启动的时候,虚拟机的M ...

  8. asp.net 获取当月的第一天和最后一天示例

    DateTime now = DateTime.Now; DateTime d1 = ); DateTime d2 = d1.AddMonths().AddDays(-); d1是本月的第一天,d2本 ...

  9. 2014第7周四excel多列文本复制技巧

    刚才win8.1强制安装更新后重启,然后一直显示“安装更新失败正在,正在撤销更改,请不要关闭计算机”,等了很久还是不行,我还是强制按下了电源按钮,然后再次开机还是这样,实在没办法只能等,过了N久后没想 ...

  10. C编译器、链接器、加载器详解

    摘自http://blog.csdn.net/zzxian/article/details/16820035 C编译器.链接器.加载器详解 一.概述 C语言的编译链接过程要把我们编写的一个c程序(源代 ...