현재 위치: 집 > 다운로드 > JS 효과 > CSS3 특수 효과 > CSS3로 만든 일식 애니메이션 특수 효과
CSS3로 만든 일식 애니메이션 특수 효과
나누다: JS 효과 / CSS3 특수 효과 | 출시 시간: 2017-12-25 | 방문: 1315 |
다운로드: 48 |
최신 다운로드
판타지 아쿠아리움
소녀전선
별의 날개
작은 꽃요정 요정의 천국
레스토랑 큐트스토리
산허 여행 탐험
사랑과 프로듀서
가장 강력한 두뇌 3
오드 더스트: 다밀라
젊은 서유기 2
24시간11리더보드 읽기
- 1 크기 조정 가능한 텍스트 요소에서 줄임표 잘림을 어떻게 구현할 수 있습니까?
- 2 diskmsg.dll - diskmsg.dll이 무엇인가요?
- 3 Dialupmanager.dll - Dialupmanager.dll이 무엇인가요?
- 4 diagrpt.dll -diagrpt.dll이란 무엇입니까?
- 5 Ease-in-out을 사용한 CSS 전환이 마우스 오버 시에는 원활하게 작동하지만 마우스 아웃 시 갑자기 작동하는 이유는 무엇입니까?
- 6 dicrhash.dll - dicrhash.dll이란 무엇입니까?
- 7 Spring에서 자체 인스턴스화된 객체에 종속성을 주입하는 방법은 무엇입니까?
- 8 정수를 추가하고 연결할 때 PHP가 \"2\"를 에코하는 이유는 무엇입니까?
- 9 Java 애플리케이션이 OS 시간대 대신 GMT를 사용하는 이유는 무엇이며 어떻게 해결할 수 있습니까?
- 10 Java에서 HTTP URL을 효과적으로 핑하는 방법: 종합 안내서
- 11 내 `std::fstream`이 파일 생성에 실패하는 이유는 무엇입니까?
- 12 \"class\" 속성을 사용하여 UI5 XML 보기에서 CSS 클래스에 바인딩하는 방법은 무엇입니까?
- 13 지역 변수를 사용한 패닉 복구가 Go에서 반환 값을 변경하지 않는 이유는 무엇입니까?
- 14 digiconf.dll - digiconf.dll이란 무엇입니까?
- 15 기존 PHP 클래스에서 UML 다이어그램을 생성하려면 어떻게 해야 합니까?
최신 튜토리얼
-
- 해외 웹 개발 풀스택 강좌 총집합
- 1651 2024-04-24
-
- Go 언어 실습 GraphQL
- 1925 2024-04-19
-
- 550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다
- 3344 2024-04-18
-
- 기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬
- 2878 2024-04-10
-
- MySQL 시작하기(mosh 교사)
- 1752 2024-04-07
-
- Mock.js | Axios.js | Json - 10일간의 고품질 수업
- 2564 2024-03-29
<머리>
<meta charset="utf-8">
<title>逼真的CSS3日食动画特效</title>
<스타일>
HTML, 본문 {
너비: 100%;
오버플로-x: 숨김;
}
*, *:이전, *:이후 {
상자 크기 조정: 테두리 상자;
마진: 0;
패딩: 0;
}
.우주 {
너비: 100vw;
높이: 100vh;
배경: #030613;
디스플레이: 차단;
위치: 상대적;
-webkit-animation: skyDim 4s 8s 선형 전달;
애니메이션: skyDim 4s 8s 선형 앞으로;
}
.universe:이전 {
내용: "";
상자 그림자: 10vw 1vh #fff, 14vw 29vh 2px #FFF, 23vw 34vh 1px #FFF, 1vw 99vh 1px #FFF, 20vw 80vh #FFF, 90vw 10vh 2px #fff, 55vw 9vh #FFF, 24vw 4vh 1px #FFF, 50vw 99vh 1px #FFF, 74vw 40vh 1px #FFF, 80vw 9vh 1px #FFF, 20vw 80vh #FFF, 85vw 78vh #fff;
너비: 4px;
높이: 4px;
위치: 절대;
테두리 반경: 50%;
-webkit-animation: starFloating 100s -200s 선형 모두 무한;
애니메이션: 별플로팅 100초 -200초 선형 모두 무한;
}
.universe:이후 {
내용: "";
상자 그림자: 37vw 78vh #fff, 17vw 69vh #FFF, 68vw 4vh 1px #FFF, 98vw 9vh 1px #FFF, 45vw 67vh #FFF, 95vw 1vh 2px #fff, 35vw 75vh 2px #FFF, 44vw 47vh 1 px #FFF, 54vw 5vh 1px #FFF, 22vw 29vh 1px #FFF, 39vw 71vh 1px #FFF, 11vw 11vh #FFF, 88vw 82vh #fff;
너비: 2px;
높이: 2px;
위치: 절대;
테두리 반경: 50%;
-webkit-animation: starFloating 100s 3s 선형 뒤로 무한;
애니메이션: 별플로팅 100s 3s 선형 뒤로 무한;
}
.sun {
높이: 200px;
너비: 200px;
테두리 반경: 50%;
배경: #cfcfd4;
상자 그림자: 0 0 60px 금, 0 0 100px #b9a018, 삽입 0 5px 35px 53px #dbdbdb, 삽입 48px 8px 34px 25px #c4c4c4;
왼쪽: 계산(50% - 100px);
상단: 계산(50% - 100px);
위치: 절대;
-webkit-animation: sunFreakOut 5s 7.1s 선형 전달;
애니메이션: sunFreakOut 5s 7.1s 선형 앞으로;
}
.문 {
높이: 50px;
너비: 50px;
테두리 반경: 50%;
배경: rgba(0, 0, 0, 0.99);
상자 그림자: 삽입 5px 1px 10px -8px #d4d4d6;
-웹킷 전환: 1초;
전환: 1초;
상단: 계산(40% - 100px);
위치: 절대;
Z-색인: 5;
-webkit-animation: 20초의 이지인아웃을 앞으로 이동합니다.
애니메이션: 20초의 이지인아웃을 앞으로 이동합니다.
}
@-webkit-keyframes 이동 {
0% {
-webkit-transform: 번역X(100vw);
변환: 번역X(100vw);
}
40%, 60% {
상단: 계산(50% - 100px);
}
50%, 50.5% {
너비: 200px;
높이: 200px;
-webkit-transform: 번역X(calc(50vw - 100px));
변환: 번역X(calc(50vw - 100px));
상자 그림자: 삽입 20px 1px 35px -15px #d4d4d6;
상단: 계산(50% - 100px);
}
60% {
상자 그림자: 삽입 -20px 1px 35px -15px #d4d4d6;
}
100% {
너비: 50px;
높이: 50px;
-webkit-transform: 번역X(calc(-1vw - 60px));
변환: 번역X(calc(-1vw - 60px));
상단: 계산(40% - 100px);
상자 그림자: 삽입 -5px 1px 10px -8px #d4d4d6;
}
}
@keyframes 이동 {
0% {
-webkit-transform: 번역X(100vw);
변환: 번역X(100vw);
}
40%, 60% {
상단: 계산(50% - 100px);
}
50%, 50.5% {
너비: 200px;
높이: 200px;
-webkit-transform: 번역X(calc(50vw - 100px));
변환: 번역X(calc(50vw - 100px));
상자 그림자: 삽입 20px 1px 35px -15px #d4d4d6;
상단: 계산(50% - 100px);
}
60% {
상자 그림자: 삽입 -20px 1px 35px -15px #d4d4d6;
}
100% {
너비: 50px;
높이: 50px;
-webkit-transform: 번역X(calc(-1vw - 60px));
변환: 번역X(calc(-1vw - 60px));
상단: 계산(40% - 100px);
상자 그림자: 삽입 -5px 1px 10px -8px #d4d4d6;
}
}
@-webkit-keyframes skyDim {
0%, 100% {
배경: #030613;
}
50%, 70% {
배경: 검정색;
}
}
@keyframes skyDim {
0%, 100% {
배경: #030613;
}
50%, 70% {
배경: 검정색;
}
}
@-webkit-keyframes sunFreakOut {
0%, 100% {
상자 그림자: 0 0 60px 금, 0 0 100px #b9a018, 삽입 0 5px 35px 53px #dbdbdb, 삽입 48px 8px 34px 25px #c4c4c4;
}
50%, 70% {
상자 그림자: 0 0 50px #e30000, 0 0 0px #b91818, 삽입 0 5px 35px 53px #dbdbdb, 삽입 48px 8px 34px 25px #c4c4c4;
}
}
@keyframes sunFreakOut {
0%, 100% {
상자 그림자: 0 0 60px 금, 0 0 100px #b9a018, 삽입 0 5px 35px 53px #dbdbdb, 삽입 48px 8px 34px 25px #c4c4c4;
}
50%, 70% {
상자 그림자: 0 0 50px #e30000, 0 0 0px #b91818, 삽입 0 5px 35px 53px #dbdbdb, 삽입 48px 8px 34px 25px #c4c4c4;
}
}
@-webkit-keyframes 별플로팅 {
0% {
불투명도: 0;
}
10% {
불투명도: 1;
}
100% {
-webkit-transform: 번역Y(-100vh);
변환: 번역Y(-100vh);
}
}
@keyframes 별플로팅 {
0% {
불투명도: 0;
}
10% {
불투명도: 1;
}
100% {
-webkit-transform: 번역Y(-100vh);
변환: 번역Y(-100vh);
}
}
</스타일>
</머리>
这是一款不常逼真的使用纯CSS3实现的一个天狗食月日食动画特效,当日全食时,还有背景stars闪烁动画特效,效果很漂亮