CSS3 구형 웹 페이지 로딩 애니메이션 아이콘 특수 효과

<머리>
<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를 변환합니다.