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);
}
}
乌尔里{
列表样式：无；
}