这篇大部分是转载,来自《高大上的 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. iOS控制器的创建方式

    iOS控制器的创建.除了常见的alloc init外还有通过加载storyboard和xib的方式,下边逐一展开: 1.代码alloc init 创建方式 ViewController *vc= [[ ...

  2. 天坑 之 java web servlet+jsp项目 配置后 404 （MyEclipse转eclipse）

    最近搞一个自己的博客系统玩,用了servlet+jsp,结果发现了两个大问题: 1.无法 Export 出 WAR文件: 2.生成WAR,放置到TOMCAT的 webapps目录后,http://lo ...

  3. C#传递参数大集合

    方法的参数是个值得特别注意的地方.方法的参数传递有四种类型:传值(by value),传址(by reference),输出参数(by output),数组参数(by array).传值参数无需额外的 ...

  4. media type 与 media query

    参考博客:http://www.qianduan.net/media-type-and-media-query.html media type(媒体类型)是css 2中的一个非常有用的属性,通过med ...

  5. SQLServer 2012 可视化窗口中，设置“时间”默认值为“当前时间"

    最近,需要在SQLServer 2012中,设置datetime的默认值为当前时间. 通过可视化窗口进行设置,而不是将getdate()函数写在sql语句中,也不是将‘2022-2-2 22:22:2 ...

  6. php cli 模式下执行文件，require 加载路径错误

    今天,同事突然告诉我,我写的一个做计划任务的php脚本执行总是不成功. 脚本本身很简单,里面只有包含了几个库文件并执行了一个函数,函数应该没有错误,这个函数在别处也调用过,没有问题.我在本地用浏览器访 ...

  7. 1003 Crashing Balloon

    考察DFS的应用,判断两个数的因子. #include <stdio.h> int f1,f2; void DFS(int m,int n,int k){ ){ f2=; ) f1=; } ...

  8. nginx自定义模块编写-根据post参数路由到不同服务器

    nginx可以轻松实现根据不同的url 或者 get参数来转发到不同的服务器,然而当我们需要根据http包体来进行请求路由时,nginx默认的配置规则就捉襟见肘了,但是没关系,nginx提供了强大的自 ...

  9. Android事件侦听器回调方法浅谈

    http://developer.51cto.com/art/201001/180846.htm Android事件侦听器作为视图View类的接口,其中包含有不少回调方法,比如:onClick():o ...

  10. K-th Number(第k大数)

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 45710   Accepted: 15199 Ca ...