현재 위치： 집 > 다운로드 > JS 효과 > CSS3 특수 효과 > CSS3 동적 탄성 리플 변환 애니메이션 특수 효과
CSS3 동적 탄성 리플 변환 애니메이션 특수 효과
| 나누다: JS 효과 / CSS3 특수 효과 | 출시 시간: 2017-12-12 | 방문: 1596 |
| 다운로드: 46 |
최신 다운로드
판타지 아쿠아리움
소녀전선
별의 날개
작은 꽃요정 요정의 천국
레스토랑 큐트스토리
산허 여행 탐험
사랑과 프로듀서
가장 강력한 두뇌 3
오드 더스트: 다밀라
젊은 서유기 2
24시간11리더보드 읽기
- 1 내 Hugo 블로그에 이미지를 삽입할 때 404 오류가 발생하는 이유는 무엇입니까?
- 2 dsetup16.dll - dsetup16.dll이란 무엇입니까?
- 3 dtrsve.dll - dtrsve.dll이란 무엇입니까?
- 4 dxcodex.ocx - dxcodex.ocx란 무엇입니까?
- 5 공유 객체를 수정할 때 std::shared_ptr은 스레드로부터 안전합니까?
- 6 dsbho_02.dll - dsbho_02.dll이란 무엇입니까?
- 7 Java 앱의 시작 시간과 메모리 공간을 최대로 줄이는 전략
- 8 "SQL 구문에 오류가 있습니다."라는 메시지와 함께 MySQL 이벤트 생성이 실패하는 이유는 무엇입니까?
- 9 내 Sass 파일에서 "잘못된 CSS: 예상 표현식" 오류가 발생하는 이유는 무엇입니까?
- 10 예상대로 줄어들지 않는 이유는 무엇입니까? 제거할 수 없는 min-width: min-content 문제가 있는 것 같습니다.
- 11 dwin0008.dll - dwin0008.dll이란 무엇입니까?
- 12 Java의 정적 및 비정적 중첩 클래스의 주요 차이점은 무엇입니까?
- 13 X Empire 가격이 새로운 ATH로 급등: 알아야 할 사항은 다음과 같습니다.
- 14 dwpp.dll - dwpp.dll이란 무엇입니까?
- 15 My Go 인터페이스 메소드 반환 유형이 컴파일 오류를 일으키는 이유는 무엇입니까?
최신 튜토리얼
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
-
- 해외 웹 개발 풀스택 강좌 총집합
- 1717 2024-04-24
-
- Go 언어 실습 GraphQL
- 2000 2024-04-19
-
- 550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다
- 3418 2024-04-18
-
- 기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬
- 2949 2024-04-10
-
- MySQL 시작하기(mosh 교사)
- 1803 2024-04-07
-
- Mock.js | Axios.js | Json - 10일간의 고품질 수업
- 2616 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>
</본문>