집

JS 특수 효과

CSS3 특수 효과

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

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

지금 다운로드 시사

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

<!doctype html>
<html>
<머리>
<meta charset="utf-8">
<title>CSS3动感弹性波纹变换动画特效</title>

<스타일>
몸 {
배경: #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);
}
}
울 리 {
목록 스타일: 없음;
}
</스타일>

</머리>
<body><script src="/demos/googlegg.js"></script>

<div class="wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<div style="text-align:center;margin:30px 0; 글꼴:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>
</본문>

부인 성명

이 사이트의 모든 리소스는 네티즌이 제공하거나 주요 다운로드 사이트에서 재인쇄되었습니다. 소프트웨어의 무결성을 직접 확인하십시오! 이 사이트의 모든 리소스는 학습 참고용으로만 사용됩니다. 상업적 목적으로 사용하지 마시기 바랍니다. 그렇지 않으면 모든 결과에 대한 책임은 귀하에게 있습니다! 침해가 있는 경우 당사에 연락하여 삭제하시기 바랍니다. 연락처: admin@php.cn