只要给blackball和redball加上blurfilter，效果加上contrastfilter，就可以实现Photoshop中的特效，blurfilter必须使用filter:blur(value),contrast然后使用filter:contrast(value)。CSS看起来像这样：.effect{width:100%;高度：100%；填充顶部：50px；过滤器：对比度（10）；背景：#fff;}.blackball{宽度：100px;高度：100px；背景：黑色；填充：10px；边界半径：50%；保证金：0自动；z-索引：1；过滤器：模糊（5px）；}.redball{宽度：60px；高度：60px；背景：#f00；填充：10px；边界半径：50%；位置：绝对；顶部：70px；左：50px；z-索引：2；过滤器：模糊（5px）；动画：rball6s无限；里面blur的值设置为5px，contrast的值设置为10，可以看到红黑球粘在一起了。至于如何让他们动起来？需要用到CSS3动画，动画程序如下：@keyframesrball{0%,100%{left:35px;宽度：60px；高度：60px；}4%,54%{宽度:60px;高度：60px；}10%,60%{宽度:50px;高度：70px；}20%,70%{宽度:60px;高度：60px；}34%,90%{宽度:70px;高度：50px；60px;高度：60px；}50%{左：计算（100%-95px）；宽度：60px；高度：60px；}}这里的关键帧写了很多，因为当红球进入黑球时，水平方向会被压缩，离开黑球时，水平方向方向会拉长，这样摸起来会比较黏。为了测试这个效果，费了我不少心血！（不过这里有一点要注意，因为位置会自动计算，所以如果要测试，记得把最外层效果的宽度设置为320px）完成红球后，把两个蓝球放在一起再Separation也是一样的道理。下面列出了两个蓝色球的CSS。比较需要注意的是，蓝球合并后会变大，分开时也会被拉伸。.blueball1{宽度：80px;高度：80px；背景：#00f；填充：10px；边界半径：50%；位置：绝对；顶部：230px；左：0；z-索引：2；过滤器：模糊（8px）；动画：bball16s无限；}.blueball2{宽度：80px；高度：80px；背景：#00f；填充：10px；边界半径：50%；位置：绝对；顶部：230px；左：240px；z-索引：2；过滤器：模糊（8px）；animation:bball26sinfinite;}@keyframesbball1{0%,100%{left:0;顶部：230px；宽度：80px；高度：80px；}20%{顶部：230像素；宽度：80px；高度：80px；}85%{顶部：230像素；左：75px；宽度：90px；高度：70px；}90%{顶部：228px；宽度：75px；高度：85px；}50%{顶部：215像素；左：110px；宽度：110px；高度：110px；}}@keyframesbball2{0%,100%{left:240px;顶部：230px；宽度：80px；高度：80px；}20%{顶部：230像素；宽度：80px；高度：80px；}85%{顶部：230像素；左：165px；宽度：90px；高度：70px；}90%{顶部：228px;宽度：75px；高度：85px；}50%{左：110px；顶部：215px；宽度：110px；高度：110px；不知道这个效果可以用在什么地方，但是如果用在海底世界或者一些加载特效上，应该是相当不错的！获取粘球的完整动画代码：