CSS3 動的弾性波紋変形アニメーション特殊効果

これは、ユニークでクリエイティブな CSS3 動的弾性波紋変形アニメーション効果です。純粋な CSS3 円形波紋アニメーション効果です。あまり実用的ではありませんが、必要な効果を作成するための実装方法を学ぶことができます。

<頭>
<メタ文字セット="utf-8">


<スタイル>
体 {＃＃＃ 背景: #1C1C1C;
オーバーフロー: 非表示;
}

。包む {＃＃＃ 位置: 絶対;
トップ: 50%;
左: 50%;
-webkit-transform: 変換(-50%, -50%);
変換: 変換(-50%, -50%);
マージン左: -150px;
}

ウル {
-webkit-transform:rotate3d(0, 1, 0, 45deg);
変換:rotate3d(0, 1, 0, 45deg);
}
ウルリ {
背景: #1c1c1c;
ボックスシャドウ: インセット 1px 1px 40px #19A598;
境界半径: 50%;
位置: 絶対;
トップ: 50%;
左: 50%;
}

li:nth-child(1) {
境界線: 1 ピクセルの実線 #189c90;
幅: 30px;
高さ: 30px;
z インデックス: -1;
マージントップ: -15px;
左マージン: 5px;
-webkit-animation: スピン 2 秒 0.2 秒 無限;
アニメーション: スピン 2 秒 0.2 秒 無限;
}

li:nth-child(2) {
境界線: 1 ピクセルの実線 #169388;
幅: 60px;
高さ: 60px;
z インデックス: -2;
マージントップ: -30px;
左マージン: 10px;
-webkit-animation: スピン 2 秒 0.4 秒 無限;
アニメーション: スピン 2 秒 0.4 秒 無限;
}

li:nth-child(3) {
境界線: 1 ピクセルの実線 #158a80;
幅: 90px;
高さ: 90px;
z インデックス: -3;
マージントップ: -45px;
左マージン: 15px;
-webkit-animation: スピン 2 秒 0.6 秒 無限;
アニメーション: スピン 2 秒 0.6 秒 無限;
}

li:nth-child(4) {
境界線: 1 ピクセルの実線 #148277;
幅: 120px;
高さ: 120px;
z インデックス: -4;
マージントップ: -60px;
左マージン: 20px;
-webkit-animation: スピン 2 秒 0.8 秒 無限;
アニメーション: スピン 2 秒 0.8 秒 無限;
}

li:nth-child(5) {
境界線: 1 ピクセルの実線 #12796f;
幅: 150px;
高さ: 150px;
z インデックス: -5;
マージントップ: -75px;
左マージン: 25px;
-webkit-animation: スピン 2 秒 1 秒 無限;
アニメーション: スピン 2 秒 1 秒 無限;
}

li:nth-child(6) {
境界線: 1 ピクセルの実線 #117067;
幅: 180px;
高さ: 180px;
z インデックス: -6;
マージントップ: -90px;
左マージン: 30px;
-webkit-animation: スピン 2 秒 1.2 秒 無限;
アニメーション: スピン 2 秒 1.2 秒 無限;
}

li:nth-child(7) {
境界線: 1 ピクセルの実線 #10675f;
幅: 210px;
高さ: 210px;
z インデックス: -7;
マージントップ: -105px;
左マージン: 35px;
-webkit-animation: スピン 2 秒 1.4 秒 無限;
アニメーション: スピン 2 秒 1.4 秒 無限;
}

li:nth-child(8) {
境界線: 1 ピクセルの実線 #0e5e57;
幅: 240px;
高さ: 240px;
z インデックス: -8;
マージントップ: -120px;
左マージン: 40px;
-webkit-animation: スピン 2 秒 1.6 秒 無限;
アニメーション: スピン 2 秒 1.6 秒 無限;
}

li:nth-child(9) {
境界線: 1 ピクセルの実線 #0d554f;
幅: 270px;
高さ: 270px;
z インデックス: -9;
マージントップ: -135px;
左マージン: 45px;
-webkit-animation: スピン 2 秒 1.8 秒 無限;
アニメーション: スピン 2 秒 1.8 秒 無限;
}

li:nth-child(10) {
境界線: 1 ピクセルの実線 #0c4c46;
幅: 300px;
高さ: 300px;
z インデックス: -10;
マージントップ: -150px;
左マージン: 50px;
-webkit-animation: 2 秒 2 秒無限スピン;
アニメーション: 2 秒 2 秒無限スピン;
}

li:nth-child(11) {
境界線: 1 ピクセルの実線 #0a443e;
幅: 330px;
高さ: 330px;
z インデックス: -11;
マージントップ: -165px;
左マージン: 55px;
-webkit-animation: スピン 2 秒 2.2 秒 無限;
アニメーション: スピン 2 秒 2.2 秒 無限;
}

@-webkit-keyframes スピン {
0% {
-webkit-transform: 回転(0度) スケール(1);
変換: 回転(0度) スケール(1);
}
50% {
-webkit-transform: 回転(360度) スケール(2);
変換: 回転(360度) スケール(2);
}
100% {
-webkit-transform: 回転(0度) スケール(1);
変換: 回転(0度) スケール(1);
}
}

@keyframes スピン {
0% {
-webkit-transform: 回転(0度) スケール(1);
変換: 回転(0度) スケール(1);
}
50% {
-webkit-transform: 回転(360度) スケール(2);
変換: 回転(360度) スケール(2);
}
100% {
-webkit-transform: 回転(0度) スケール(1);
変換: 回転(0度) スケール(1);
}
}
ウルリ {
リストスタイル: なし;
}