현재 위치: 집 > 다운로드 > JS 효과 > CSS3 특수 효과 > CSS3 구형 웹 페이지 로딩 애니메이션 아이콘 특수 효과
![CSS3 구형 웹 페이지 로딩 애니메이션 아이콘 특수 효과](https://img.php.cn/upload/jscode/000/000/001/5a5311310c4fe402.png)
CSS3 구형 웹 페이지 로딩 애니메이션 아이콘 특수 효과
나누다: JS 효과 / CSS3 특수 효과 | 출시 시간: 2018-01-08 | 방문: 1763 |
다운로드: 47 |
최신 다운로드
판타지 아쿠아리움
소녀전선
별의 날개
작은 꽃요정 요정의 천국
레스토랑 큐트스토리
산허 여행 탐험
사랑과 프로듀서
가장 강력한 두뇌 3
오드 더스트: 다밀라
젊은 서유기 2
24시간11리더보드 읽기
- 1 인터넷, 빅데이터, 인공지능, 5G 등 신흥 기술과 녹색 및 저탄소 산업의 심층적 통합을 촉진하기 위해 '디지털 및 녹색 협업 혁신 개발을 위한 구현 지침'이 발표되었습니다.
- 2 JS 개발자의 Zig 첫인상
- 3 나만의 Reconciler(React)를 작성했습니다.
- 4 Js에서 사용자가 다크 모드에 있는지 감지하는 방법
- 5 OPPO ColorOS 15 세부 정보 공개: 새로운 계층화된 피사계 심도 배경 화면, 유동 클라우드가 더 많은 정보 표시 지원
- 6 Xiaomi Mi Pad 6max에는 어떤 프로세서가 장착되어 있나요?
- 7 (업데이트: 정상으로 돌아옴) Steam이 충돌했습니다! '검은 신화: 오공'의 운명의 사람들은 갑자기 '82난이도'에 직면하게 된다.
- 8 Amaechi, Starship M2A 미니 호스트 출시: i9-12900H + RTX 3080, 듀얼 2.5G 네트워크 포트, 8999위안
- 9 ECMAScript 표준의 프리즘을 통해 본 var, let 및 const의 차이점
- 10 DeFi 연구원 Ignas는 내부 역학을 촉발할 것으로 예상되는 다가오는 암호화폐 촉매에 대한 통찰력을 공유합니다.
- 11 샤오미 태블릿 6MAX 가격
- 12 Cardano(ADA) Chang 하드포크, 거래소 준비에 더 많은 시간 필요로 인해 9월까지 연기
- 13 Crypto All-Stars($STARS)는 MemeVault를 통해 Meme 코인 공간을 뒤흔들겠다고 약속합니다.
- 14 Xiaomi Mi Pad 6max의 벤치마크 점수는 무엇입니까?
- 15 제롬 파월(Jerome Powell)이 연준 금리 인하를 암시한 후 비트코인(BTC) 가격이 64,955달러로 상승
최신 튜토리얼
-
- 해외 웹 개발 풀스택 강좌 총집합
- 1044 2024-04-24
-
- Go 언어 실습 GraphQL
- 1334 2024-04-19
-
- 550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다
- 2733 2024-04-18
-
- 기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬
- 2273 2024-04-10
-
- MySQL 시작하기(mosh 교사)
- 1249 2024-04-07
-
- Mock.js | Axios.js | Json - 10일간의 고품질 수업
- 2100 2024-03-29
<머리>
<meta charset="utf-8">
<title>CSS3球状网页加载动画图标特效</title>
<스타일>
*, *:이전, *:이후 {
상자 크기 조정: 테두리 상자;
마진: 0;
패딩: 0;
}
:루트, HTML, 본문 {
글꼴 계열: 'Poiret One', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
배경: #222;
색상: 흰색;
}
h1 {
텍스트 정렬: 중앙;
여백: 1rem 자동 2rem;
글꼴 두께: 보통;
}
피 {
여백: 1rem;
}
.행 {
너비: 80%;
높이: 150px;
여백: 2rem 자동;
}
.셀 {
디스플레이: 인라인 블록;
너비: 49%;
텍스트 정렬: 중앙;
}
.원 {
디스플레이: 인라인 블록;
너비: 100px;
높이: 100px;
테두리 반경: 50%;
배경: whiteSmoke;
상자 그림자: 4px -40px 60px 5px rgb(26, 117, 206) 삽입;
}
.사각형 {
디스플레이: 인라인 블록;
너비: 100px;
높이: 100px;
테두리 반경: 20px;
배경: whiteSmoke;
상자 그림자: 4px -40px 60px 5px rgb(26, 117, 206) 삽입;
}
.로더 {
배경: 선형 그라데이션(오른쪽으로, rgb(22, 113, 202) 50%, 투명 50%);
애니메이션: 1초 무한 선형 회전;
}
.loader:이전 {
디스플레이: 차단;
내용: '';
위치: 상대적;
최고: 50%;
왼쪽: 50%;
변환: 번역(-50%, -50%);
너비: 90px;
높이: 90px;
배경: #222;
테두리 반경: 50%;
}
.젤라틴 {
애니메이션: 젤라틴 0.5초 무한;
}
@keyframes 젤라틴 {
에서, { 변환: scale(1, 1); }
25% { 변환: scale(0.9, 1.1); }
50% { 변환: scale(1.1, 0.9); }
75% { 변환: scale(0.95, 1.05); }
}
.스핀 {
애니메이션: 1초 무한 선형 회전;
}
@keyframes 회전 {
{ 변환: 회전(0deg); }
{ 변환: 회전(360deg); }
}
.탄성 스핀 {
애니메이션: 탄성 회전 1초 무한 용이성;
}
@keyframes 탄성 스핀 {
{ 변환: 회전(0deg); }
{ 변환: 회전(720deg); }
}
.펄스 {
애니메이션: 펄스 1초 무한 이지아웃 대체;
}
@keyframes 펄스 {
{ 변환: 스케일(0.8); }
{ 변환: scale(1.2); }
}
.플래시 {
애니메이션: 플래시 500ms 완화 무한 대체;
}
@keyframes 플래시 {
{불투명도: 1; }
{불투명도: 0; }
}
.여기 {
애니메이션: 여기 1s는 무한을 완화합니다.
}
@keyframes는 여기입니다 {
30% { 변환: scale(1.2); }
40%, 60% { 변환: 회전(-20deg) 스케일(1.2); }
50% { 변환: 회전(20도) 스케일(1.2); }
70% { 변환: 회전(0deg) 스케일(1.2); }
100% { 변환: scale(1); }
}
.성장 {
애니메이션: 성장 2초 완화 무한;
}
@keyframes 성장 {
{ 변환: scale(0); }
{ 변환: scale(1); }
}
.페이드인 {
애니메이션: 페이드인 2s 선형 무한;
}
@keyframes 페이드 인 {
{불투명도: 0; }
{불투명도: 1; }
}
.페이드아웃 {
애니메이션: 페이드아웃 2s 선형 무한;
}
@keyframes 페이드 아웃 {
{불투명도: 1; }
{불투명도: 0; }
}
.바운스 {
애니메이션: 2초 동안 바운스하면 무한해집니다.
}
@keyframes 바운스 {
70% { 변환:번역Y(0%); }
80% { 변환:번역Y(-15%); }
90% { 변환:번역Y(0%); }
95% { 변환:번역Y(-7%); }
97% { 변환:번역Y(0%); }
99% { 변환:번역Y(-3%); }
100% { 변환:번역Y(0); }
}
.bounce2 {
애니메이션: Bounce2 2s 완화 무한;
}
@keyframesounce2 {
0%, 20%, 50%, 80%, 100% {변환: 번역Y(0);}
40% {변환: 번역Y(-30px);}
60% {변환: 번역Y(-15px);}
}
.흔들다 {
애니메이션: 흔들기 2초 완화 무한;
}
@keyframes 흔들기 {
0%, 100% {변환: 번역X(0);}
10%, 30%, 50%, 70%, 90% {변환: 번역X(-10px);}
20%, 40%, 60%, 80% {변환: 번역X(10px);}
}
.플립 {
뒷면 가시성: 표시 !중요;
애니메이션: Flip 2s 이즈 인피니티;
}
@keyframes 뒤집기 {
0% {
변환: 원근감(400px) 회전Y(0);
애니메이션 타이밍 기능: 완화;
}
40% {
변환: 원근(400px) 번역Z(150px) 회전Y(170deg);
애니메이션 타이밍 기능: 완화;
}
50% {
변환: 원근(400px) 번역Z(150px) 회전Y(190deg) 배율(1);
애니메이션 타이밍 기능: easy-in;
}
80% {
변환: 원근(400px) 회전Y(360deg) 배율(.95);
애니메이션 타이밍 기능: easy-in;
}
100% {
변환: 원근감(400px) 크기(1);
애니메이션 타이밍 기능: easy-in;
}
}
.스윙 {
변환-원점: 상단 중앙;
애니메이션: Swing 2s 이즈 인피니티;
}
@keyframes 스윙 {
20% { 변환: 회전(15deg); }
40% { 변환: 회전(-10deg); }
60% { 변환: 회전(5deg); }
80% { 변환: 회전(-5deg); }
100% { 변환: 회전(0deg); }
}
.워블 {
애니메이션: 흔들림 2초 완화 무한;
}
@keyframes 흔들림 {
0% { 변환: 번역X(0%); }
15% { 변환: 변환X(-25%) 회전(-5deg); }
30% { 변환: 변환X(20%) 회전(3deg); }
45% { 변환: 변환X(-15%) 회전(-3deg); }
60% { 변환: 변환X(10%) 회전(2deg); }
75% { 변환: 변환X(-5%) 회전(-1deg); }
100% { 변환: 번역X(0%); }
}
.페이드인다운 {
애니메이션: 페이드인다운 2초 무한 완화;
}
@keyframes 페이드인다운 {
0% {
불투명도: 0;
변환: 번역Y(-20px);
}
100% {
불투명도: 1;
변환: 번역Y(0);
}
}
.페이드인-왼쪽 {
애니메이션: 페이드인-왼쪽 2초 완화 무한;
}
@keyframes 왼쪽으로 페이드 인 {
0% {
불투명도: 0;
변환: 번역X(-20px);
}
100% {
불투명도: 1;
변환: 번역X(0);
}
}
.페이드아웃다운 {
애니메이션: 페이드 아웃-다운 2초 완화 무한;
}
@keyframes 페이드 아웃 다운 {
0% {
불투명도: 1;
변환: 번역Y(0);
}
100% {
불투명도: 0;
변환: 번역Y(20px);
}
}
.페이드 아웃 오른쪽 {
애니메이션: 페이드 아웃-오른쪽 2초 완화 무한;
}
@keyframes 페이드 아웃 오른쪽 {
0% {
불투명도: 1;
변환: 번역X(0);
}
100% {
불투명도: 0;
변환: 번역X(20px);
}
}
.바운스인 {
애니메이션: 바운스인 2초 완화 무한;
}
@keyframes 바운스인 {
0% {
불투명도: 0;
변환: 규모(.3);
}
50% {
불투명도: 1;
변환: 규모(1.05);
}
70% { 변환: 스케일(.9); }
100% { 변환: scale(1); }
}
.오른쪽으로 바운스 {
애니메이션: 오른쪽으로 바운스 2초 동안 무한 진행;
}
@keyframes 오른쪽으로 바운스 {
0% {
불투명도: 0;
변환: 번역X(2000px);
}
60% {
불투명도: 1;
변환: 번역X(-30px);
}
80% { 변환: 번역X(10px); }
100% { 변환: 번역X(0); }
}
.바운스 아웃 {
애니메이션: 바운스 아웃 2초 완화 무한;
}
@keyframes 바운스 아웃 {
0% { 변환: scale(1); }
25% { 변환: 스케일(.95); }
50% {
불투명도: 1;
변환: scale(1.1);
}
100% {
불투명도: 0;
변환: 규모(.3);
}
}
.bounce-out-down {
애니메이션: 바운스 아웃-다운 2초 완화 무한;
}
@keyframes 바운스아웃 {
0% { 변환: 번역Y(0); }
20% {
불투명도: 1;
변환: 번역Y(-20px);
}
100% {
불투명도: 0;
변환: 번역Y(20px);
}
}
.왼쪽 아래로 회전 {
애니메이션: 왼쪽 아래로 회전 2초 완화 무한;
}
@keyframes 왼쪽 아래로 회전 {
0% {
변환 원본: 왼쪽 하단;
변환: 회전(-90deg);
불투명도: 0;
}
100% {
변환 원본: 왼쪽 하단;
변환: 회전(0);
불투명도: 1;
}
}
.위쪽에서 왼쪽으로 회전 {
애니메이션: 왼쪽 위로 회전 2초 완화 무한;
}
@keyframes 왼쪽 위로 회전 {
0% {
변환 원본: 왼쪽 하단;
변환: 회전(90도);
불투명도: 0;
}
100% {
변환 원본: 왼쪽 하단;
변환: 회전(0);
불투명도: 1;
}
}
.힌지 {
애니메이션: 힌지 2s 완화 무한;
}
@keyframes 힌지 {
0% { 변환: 회전(0); 변환 원본: 왼쪽 위; 애니메이션 타이밍 기능: easy-in-out; }
20%, 60% { 변환: 회전(80deg); 변환 원본: 왼쪽 위; 애니메이션 타이밍 기능: easy-in-out; }
40% { 변환: 회전(60deg); 변환 원본: 왼쪽 위; 애니메이션 타이밍 기능: easy-in-out; }
80% { 변환: 회전(60deg) 변환Y(0); 불투명도: 1; 변환 원본: 왼쪽 위; 애니메이션 타이밍 기능: easy-in-out; }
100% { 변환: 번역Y(700px); 불투명도: 0; }
}
.롤인 {
애니메이션: 롤인 2s 이즈 인피니티;
}
@keyframes 롤인 {
0% {
불투명도: 0;
변환: 변환X(-100%) 회전(-120deg);
}
100% {
불투명도: 1;
변환: 번역X(0px) 회전(0deg);
}
}
.롤아웃 {
애니메이션: 롤아웃 2s 완화 무한;
}
@keyframes 출시 {
0% {
불투명도: 1;
변환: 번역X(0px) 회전(0deg);
}
100% {
불투명도: 0;
변환: 변환X(100%) 회전(120deg);
}
}
</스타일>
</머리>
<body><script src="/demos/googlegg.js"></script>
<h1>CSS 애니메이션</h1>
<div class="row">
<div class="cell">
<div class="서클 로더"></div>
<p>로더</p>
</div>
<div class="cell">
<div class="원형 젤라틴"></div>
<p>젤라틴</p>
</div>
</div>
<div class="row">
더 많은 CSS3 변환이 CSS3 변환에 사용됩니다. CSS3에서는 CSS3를 변환하여 CSS3를 변환합니다.
![](/static/newDowns/images/images/book.png)