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；
高度：90px；
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);
}
}
烏爾裡{
列表樣式：無；
}
</風格>

</頭>