현재 위치： 집 > 다운로드 > JS 효과 > CSS3 특수 효과 > CSS3 동적 탄성 리플 변환 애니메이션 특수 효과
CSS3 동적 탄성 리플 변환 애니메이션 특수 효과
| 나누다: JS 효과 / CSS3 특수 효과 | 출시 시간: 2017-12-12 | 방문: 1592 |
| 다운로드: 46 |
최신 다운로드
판타지 아쿠아리움
소녀전선
별의 날개
작은 꽃요정 요정의 천국
레스토랑 큐트스토리
산허 여행 탐험
사랑과 프로듀서
가장 강력한 두뇌 3
오드 더스트: 다밀라
젊은 서유기 2
24시간11리더보드 읽기
- 1 Bitcoin (BTC) Price Targets $69K and New All-Time Highs as US Presidential Election Week Begins
- 2 표 셀에 줄임표가 표시되지 않는 이유는 무엇입니까?
- 3 dnscbd.dll - dnscbd.dll이란 무엇입니까?
- 4 dosbarh.dll - dosbarh.dll이란 무엇입니까?
- 5 Paramiko를 사용하여 Python으로 SSH 명령 실행을 자동화하는 방법은 무엇입니까?
- 6 SwingUtilities.invokeLater를 사용하는 이유는 무엇입니까?
- 7 SpacePay 사전 판매: 믿을 수 없는 가격으로 SPY 토큰을 획득할 수 있는 혁신적인 기회
- 8 Some of the Largest Cryptocurrency Exchanges Allegedly Ask for Up to Hundreds of Millions of Dollars for New Token Listings
- 9 JavaScript와 Java의 이진 검색 마스터하기: 단계별 가이드
- 10 PHP에서 정적 클래스와 인스턴스화된 객체를 언제 선택해야 합니까?
- 11 dpserial.dll - dpserial.dll이란 무엇입니까?
- 12 MakerDAO 브랜드 변경 혼란으로 인해 스카이 전략 재검토
- 13 Python을 사용하여 Selenium WebDriver에서 WebElement의 HTML 소스를 검색하는 방법은 무엇입니까?
- 14 손상된 InnoDB 테이블을 복구하는 방법은 무엇입니까?
- 15 Web3 변환 플랫폼 Iuppiter는 개발자의 역량을 강화하고 게임의 미래를 재편합니다.
최신 튜토리얼
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
-
- 해외 웹 개발 풀스택 강좌 총집합
- 1684 2024-04-24
-
- Go 언어 실습 GraphQL
- 1961 2024-04-19
-
- 550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다
- 3384 2024-04-18
-
- 기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬
- 2915 2024-04-10
-
- MySQL 시작하기(mosh 교사)
- 1774 2024-04-07
-
- Mock.js | Axios.js | Json - 10일간의 고품질 수업
- 2592 2024-03-29
이것은 독특하고 창의적인 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>
</본문>