CSS3的动感弹性波纹变换动画特效

这是一款个性创意的CSS3动感弹性波纹变换动画特效，纯CSS3圆形波纹动画效果，虽然实用性不强，不过可以学习实现方法做出自己想要的效果。

<头>
<元字符集=“utf-8”>


<风格>
身体 {＃＃＃   背景：#1C1C1C；
  溢出：隐藏；
}

。裹 {＃＃＃   位置：绝对；
  顶部：50%；
  左：50%；
  -webkit-transform: 翻译(-50%, -50%);
          变换：翻译(-50%, -50%);
  左边距：-150px;
}

ul {
#   -webkit-变换：rotate3d(0, 1, 0, 45deg);
          变换：rotate3d(0, 1, 0, 45deg);
}
乌尔里{
  背景：#1c1c1c；
  框阴影：插图 1px 1px 40px #19A598;
  边界半径：50%；
  位置：绝对；
  顶部：50%；
  左：50%；
}

li:第 n 个孩子(1) {
  边框：1px实线#189c90;
  宽度：30px；
  高度：30px；
  z 索引：-1；
  顶部边距：-15px;
  左边距：5px；
  -webkit-animation: 旋转 2s 0.2s 无限;
          动画：旋转 2s 0.2s 无限；
}

li:第 n 个孩子(2) {
  边框：1px实线#169388;
  宽度：60px；
  高度：60px；
  z 索引：-2;
  顶部边距：-30px;
  左边距：10px;
  -webkit-animation: 旋转 2s 0.4s 无限;
          动画：旋转 2s 0.4s 无限；
}

li:第 n 个孩子(3) {
  边框：1px实线#158a80;
  宽度：90px；
  高度：90 像素；
  z 索引：-3；
  顶部边距：-45px;
  左边距：15px；
  -webkit-animation: 旋转 2s 0.6s 无限;
          动画：旋转 2s 0.6s 无限；
}

li:第 n 个孩子(4) {
  边框：1px实线#148277;
  宽度：120px；
  高度：120px；
  z 索引：-4；
  顶部边距：-60px;
  左边距：20px;
  -webkit-animation：旋转 2s 0.8s 无限；
          动画：旋转 2s 0.8s 无限；
}

li:第 n 个孩子(5) {
  边框：1px实线#12796f;
  宽度：150px；
  高度：150px；
  z 索引：-5；
  顶部边距：-75px;
  左边距：25px;
  -webkit-animation：旋转 2 秒 1 秒无限；
          动画：旋转 2s 1s 无限；
}

li:第n个孩子(6) {
  边框：1px实线#117067;
  宽度：180px；
  高度：180px；
  z 索引：-6;
  顶部边距：-90px;
  左边距：30px；
  -webkit-animation：旋转 2s 1.2s 无限；
          动画：旋转 2s 1.2s 无限；
}

li:第 n 个孩子(7) {
  边框：1px实线#10675f;
  宽度：210px；
  高度：210px；
  z 索引：-7；
  顶部边距：-105px;
  左边距：35px；
  -webkit-animation: 旋转 2s 1.4s 无限;
          动画：旋转 2s 1.4s 无限；
}

li:第n个孩子(8) {
  边框：1px实线#0e5e57;
  宽度：240px；
  高度：240px；
  z 索引：-8；
  顶部边距：-120px;
  左边距：40px；
  -webkit-animation：旋转 2s 1.6s 无限；
          动画：旋转 2s 1.6s 无限；
}

li:第n个孩子(9) {
  边框：1px实线#0d554f;
  宽度：270px；
  高度：270px；
  z 索引：-9;
  顶部边距：-135px;
  左边距：45px；
  -webkit-animation：旋转 2s 1.8s 无限；
          动画：旋转 2s 1.8s 无限；
}

li:第n个孩子(10) {
  边框：1px实心#0c4c46;
  宽度：300px；
  高度：300px；
  z 索引：-10；
  顶部边距：-150px;
  左边距：50px；
  -webkit-animation：旋转 2s 2s 无限；
          动画：旋转 2s 2s 无限；
}

li:第n个孩子(11) {
  边框：1px实心#0a443e;
  宽度：330px；
  高度：330px；
  z 索引：-11；
  顶部边距：-165px;
  左边距：55px；
  -webkit-animation：旋转 2s 2.2s 无限；
          动画：旋转 2s 2.2s 无限；
}

@-webkit-keyframes 旋转 {
  0% {
#     -webkit-transform: 旋转(0deg) 缩放(1);
            变换：旋转(0deg) 缩放(1);
  }
  50% {
#     -webkit-transform: 旋转(360deg) 缩放(2);
            变换：旋转（360deg）缩放（2）;
  }
  100% {
#     -webkit-transform: 旋转(0deg) 缩放(1);
            变换：旋转(0deg) 缩放(1);
  }
}

@关键帧旋转{
  0% {
#     -webkit-transform: 旋转(0deg) 缩放(1);
            变换：旋转(0deg) 缩放(1);
  }
  50% {
#    -webkit-transform: 旋转(360deg) 缩放(2);
            变换：旋转（360deg）缩放（2）;
  }
  100% {
#     -webkit-transform: 旋转(0deg) 缩放(1);
            变换：旋转(0deg) 缩放(1);
  }
}
乌尔里{
  列表样式：无；
}
</风格>

</头>