CSS3 동적 탄성 리플 변환 애니메이션 특수 효과

이것은 독특하고 창의적인 CSS3 동적 탄성 리플 변환 애니메이션 특수 효과입니다. 비록 실용적이지는 않지만 원하는 효과를 만들기 위해 구현하는 방법을 배울 수 있습니다.

<머리>



<스타일>
몸 {
배경: #1C1C1C;
오버플로: 숨김;
}

.wrap {
위치: 절대;
최고: 50%;
왼쪽: 50%;
-webkit-transform: 번역(-50%, -50%);
변환: 번역(-50%, -50%);
여백 왼쪽: -150px;
}

ul {
-웹킷 변환: 회전3d(0, 1, 0, 45deg);
변환: Rotate3d(0, 1, 0, 45deg);
}
울 리 {
배경: #1c1c1c;
상자 그림자: 삽입 1px 1px 40px #19A598;
테두리 반경: 50%;
위치: 절대;
최고: 50%;
왼쪽: 50%;
}

li:nth-child(1) {
테두리: 1px 솔리드 #189c90;
너비: 30px;
높이: 30px;
Z-색인: -1;
여백 상단: -15px;
여백-왼쪽: 5px;
-webkit-animation: 2초 0.2초 무한 회전;
애니메이션: 2초 0.2초 무한 회전;
}

li:nth-child(2) {
테두리: 1px 솔리드 #169388;
너비: 60px;
높이: 60px;
Z-색인: -2;
여백 상단: -30px;
여백-왼쪽: 10px;
-webkit-animation: 2초 0.4초 무한 회전;
애니메이션: 2초 0.4초 무한 회전;
}

li:nth-child(3) {
테두리: 1px 솔리드 #158a80;
너비: 90px;
높이: 90px;
Z-색인: -3;
여백 상단: -45px;
여백-왼쪽: 15px;
-webkit-animation: 2초 0.6초 무한 회전;
애니메이션: 2초 0.6초 무한 회전;
}

li:nth-child(4) {
테두리: 1px 솔리드 #148277;
너비: 120px;
높이: 120px;
Z-색인: -4;
여백 상단: -60px;
여백-왼쪽: 20px;
-webkit-animation: 2초 0.8초 무한 회전;
애니메이션: 2초 0.8초 무한 회전;
}

li:nth-child(5) {
테두리: 1px 솔리드 #12796f;
너비: 150px;
높이: 150px;
Z-색인: -5;
여백 상단: -75px;
여백-왼쪽: 25px;
-webkit-animation: 2초 1초 무한 회전;
애니메이션: 2초 1초 무한 회전;
}

li:nth-child(6) {
테두리: 1px 솔리드 #117067;
너비: 180px;
높이: 180px;
Z-색인: -6;
여백 상단: -90px;
여백-왼쪽: 30px;
-webkit-animation: 2초 1.2초 무한 회전;
애니메이션: 2초 1.2초 무한 회전;
}

li:nth-child(7) {
테두리: 1px 솔리드 #10675f;
너비: 210px;
높이: 210px;
Z-색인: -7;
여백 상단: -105px;
여백-왼쪽: 35px;
-webkit-animation: 2초 1.4초 무한 회전;
애니메이션: 2초 1.4초 무한 회전;
}

li:nth-child(8) {
테두리: 1px 솔리드 #0e5e57;
너비: 240px;
높이: 240px;
Z-색인: -8;
여백 상단: -120px;
여백-왼쪽: 40px;
-webkit-animation: 2초 1.6초 무한 회전;
애니메이션: 2초 1.6초 무한 회전;
}

li:nth-child(9) {
테두리: 1px 솔리드 #0d554f;
너비: 270px;
높이: 270px;
Z-색인: -9;
여백 상단: -135px;
여백-왼쪽: 45px;
-webkit-animation: 2초 1.8초 무한 회전;
애니메이션: 2초 1.8초 무한 회전;
}

li:nth-child(10) {
테두리: 1px 솔리드 #0c4c46;
너비: 300px;
높이: 300px;
Z-색인: -10;
여백 상단: -150px;
여백-왼쪽: 50px;
-webkit-animation: 2s 2s 무한 회전;
애니메이션: 2초 2초 무한 회전;
}

li:nth-child(11) {
테두리: 1px 솔리드 #0a443e;
너비: 330px;
높이: 330px;
Z-색인: -11;
여백 상단: -165px;
여백-왼쪽: 55px;
-webkit-animation: 2초 2.2초 무한 회전;
애니메이션: 2초 2.2초 무한 회전;
}

@-webkit-keyframes 회전 {
0% {
-webkit-transform: 회전(0deg) 축척(1);
변환: 회전(0deg) 스케일(1);
}
50% {
-webkit-transform: 회전(360deg) 배율(2);
변환: 회전(360deg) 스케일(2);
}
100% {
-webkit-transform: 회전(0deg) 축척(1);
변환: 회전(0deg) 스케일(1);
}
}

@keyframes 회전 {
0% {
-webkit-transform: 회전(0deg) 축척(1);
변환: 회전(0deg) 스케일(1);
}
50% {
-webkit-transform: 회전(360deg) 배율(2);
변환: 회전(360deg) 스케일(2);
}
100% {
-webkit-transform: 회전(0deg) 축척(1);
변환: 회전(0deg) 스케일(1);
}
}
울 리 {
목록 스타일: 없음;
}