#5-中秋月亮晕起来！不规则Blob球球(CSS)

这一两年很常在网页设计中看到这种不规则的小东西出现，甚至还会像波浪一样动。
之前傻傻地用Svg做，然後一直换path，结果效能不太好。
上网一查发现其实只要用border-radius就做得到了。（请爱用英文搜寻Youtube！）

先看一下成品，当啦～
（好像动的有点慢...有机会再调一下哈）

在查资料的同时也发现圆圈圈的效果，就一起做了：

後面的残影都是伪元素做的，opacity低一点就有恍惚的感觉啦～

Blob作法

相信大家都很神，这次就不放详细的code了，主要就是靠border-radius做出blob蠕动的感觉～
不查还不知道有这个参数 ಥ⌣ಥ

bordr-radius /前面的是指四个边角的x半径，後面是y半径，会画出一个椭圆形～然後就是让他一直变参数呀！

border-radius: 60% 87% 57% 68% / 50% 45% 78% 68%;

然後不同的圈圈动起来就设定秒数不一样就好～

animation: blob-demo 15s linear infinite;

就是15s这个

@keyframes blob-demo{
	//看大家的教学影片才知道这样把0&100一起写就好了～
  0%, 100%{
    border-radius: 60% 87% 57% 68% / 50% 45% 78% 68%;
  }
  60%{
    border-radius: 46% 60% 77% 88% / 70% 65% 58% 88%;
  }
}

圈圈作法

圈圈呢，就是把旋转中心设定大家都不一样，就会有一层一层的感觉啦～


.圈圈的class{
	//...省略
	//rotation先0就定位
	//transform-origin稍微偏离原心一点就会转偏离了～
	transform: rotate(0);
  transform-origin: 51% 51%;
	animation: rotation 2s linear infinite;
}

@keyframes rotation{
  to{
    transform: rotate(360deg)
  }
}