kesan khas animasi transformasi riak elastik dinamik CSS3

Ini adalah kesan khas animasi transformasi riak elastik CSS3 yang unik dan kreatif Ia adalah kesan animasi riak pekeliling CSS3 tulen Walaupun ia tidak begitu praktikal, anda boleh belajar bagaimana untuk melaksanakannya untuk mencipta kesan yang anda inginkan.

badan {
latar belakang: #1C1C1C;
limpahan: tersembunyi;
}

.balut {
jawatan: mutlak;
atas: 50%;
kiri: 50%;
-webkit-transform: terjemah(-50%, -50%);
ubah: terjemah(-50%, -50%);
jidar-kiri: -150px;
}

ul {
-webkit-transform: rotate3d(0, 1, 0, 45deg);
transform: rotate3d(0, 1, 0, 45deg);
}
ul li {
latar belakang: #1c1c1c;
bayang kotak: masukkan 1px 1px 40px #19A598;
jejari sempadan: 50%;
jawatan: mutlak;
atas: 50%;
kiri: 50%;
}

li:anak ke-1(1) {
sempadan: 1px pepejal #189c90;
lebar: 30px;
ketinggian: 30px;
indeks-z: -1;
jidar atas: -15px;
jidar-kiri: 5px;
-webkit-animasi: putaran 2s 0.2s tak terhingga;
animasi: putaran 2s 0.2s tak terhingga;
}

li:anak ke-2(2) {
sempadan: 1px pepejal #169388;
lebar: 60px;
ketinggian: 60px;
indeks-z: -2;
jidar atas: -30px;
jidar-kiri: 10px;
-webkit-animasi: putaran 2s 0.4s tak terhingga;
animasi: putaran 2s 0.4s tak terhingga;
}

li:anak-anak(3) {
sempadan: 1px pepejal #158a80;
lebar: 90px;
ketinggian: 90px;
indeks-z: -3;
jidar atas: -45px;
jidar-kiri: 15px;
-webkit-animasi: putaran 2s 0.6s tak terhingga;
animasi: putaran 2s 0.6s tak terhingga;
}

li:anak ke-1(4) {
sempadan: 1px pepejal #148277;
lebar: 120px;
ketinggian: 120px;
indeks-z: -4;
jidar atas: -60px;
jidar-kiri: 20px;
-webkit-animasi: putaran 2s 0.8s tak terhingga;
animasi: putaran 2s 0.8s tak terhingga;
}

li:anak ke-1(5) {
sempadan: 1px pepejal #12796f;
lebar: 150px;
ketinggian: 150px;
indeks z: -5;
jidar atas: -75px;
jidar-kiri: 25px;
-webkit-animasi: putaran 2s 1s tak terhingga;
animasi: putaran 2s 1s tak terhingga;
}

li:anak ke-1(6) {
sempadan: 1px pepejal #117067;
lebar: 180px;
ketinggian: 180px;
indeks-z: -6;
jidar atas: -90px;
jidar-kiri: 30px;
-webkit-animasi: putaran 2s 1.2s tak terhingga;
animasi: putaran 2s 1.2s tak terhingga;
}

li:anak ke-1(7) {
sempadan: 1px pepejal #10675f;
lebar: 210px;
ketinggian: 210px;
indeks-z: -7;
jidar atas: -105px;
jidar-kiri: 35px;
-webkit-animasi: putaran 2s 1.4s tak terhingga;
animasi: putaran 2s 1.4s tak terhingga;
}

li:anak ke-1(8) {
sempadan: 1px pepejal #0e5e57;
lebar: 240px;
ketinggian: 240px;
indeks-z: -8;
jidar atas: -120px;
jidar-kiri: 40px;
-webkit-animasi: putaran 2s 1.6s tak terhingga;
animasi: putaran 2s 1.6s tak terhingga;
}

li:anak ke-1(9) {
sempadan: 1px pepejal #0d554f;
lebar: 270px;
ketinggian: 270px;
indeks-z: -9;
jidar atas: -135px;
jidar-kiri: 45px;
-webkit-animasi: putaran 2s 1.8s tak terhingga;
animasi: putaran 2s 1.8s tak terhingga;
}

li:anak ke-10 (10) {
sempadan: 1px pepejal #0c4c46;
lebar: 300px;
ketinggian: 300px;
indeks-z: -10;
jidar atas: -150px;
jidar-kiri: 50px;
-webkit-animasi: putaran 2s 2s tak terhingga;
animasi: putaran 2s 2s tak terhingga;
}

li:anak ke-(11) {
sempadan: 1px pepejal #0a443e;
lebar: 330px;
ketinggian: 330px;
indeks-z: -11;
jidar atas: -165px;
jidar-kiri: 55px;
-webkit-animasi: putaran 2s 2.2s tak terhingga;
animasi: putaran 2s 2.2s tak terhingga;
}

@-webkit-keyframes berputar {
0% {
-webkit-transform: putar(0deg) skala(1);
transform: putar(0deg) skala(1);
}
50% {
-webkit-transform: putar(360deg) skala(2);
transform: putar(360deg) skala(2);
}
100% {
-webkit-transform: putar(0deg) skala(1);
transform: putar(0deg) skala(1);
}
}

@keyframes berputar {
0% {
-webkit-transform: putar(0deg) skala(1);
transform: putar(0deg) skala(1);
}
50% {
-webkit-transform: putar(360deg) skala(2);
transform: putar(360deg) skala(2);
}
100% {
-webkit-transform: putar(0deg) skala(1);
transform: putar(0deg) skala(1);
}
}
ul li {
gaya senarai: tiada;
}