이 기사에서는 귀하의 프로젝트를 더욱 빛나게 만들어 줄 10가지 이상의 로딩 로딩 효과를 공유하겠습니다. 모두에게 도움이 되기를 바랍니다. 와서 수집해 보세요! !
모두가 로딩 애니메이션을 자주 사용한다고 생각하지만 대부분의 구성 요소 라이브러리의 로딩 스타일은 너무 단순합니다.
이번에는 프런트 엔드 작업자를 위한 고품질 로딩 애니메이션 효과를 10개 이상 모았습니다! ! 복사해서 바로 사용해보세요! !
점프하고 회전하는 블록과 그라데이션 그림자는 단순히 물체가 굴러가는 그림을 구성합니다
<!-- loading.html --> <div class="boxLoading"></div>
/* loading.css */ .boxLoading { width: 50px; height: 50px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .boxLoading:before { content: ''; width: 50px; height: 5px; background: #fff; opacity: 0.7; position: absolute; top: 59px; left: 0; border-radius: 50%; animation: shadow .5s linear infinite; } .boxLoading:after { content: ''; width: 50px; height: 50px; background: #e04960; animation: animate .5s linear infinite; position: absolute; top: 0; left: 0; border-radius: 3px; } @keyframes animate { 17% { border-bottom-right-radius: 3px; } 25% { transform: translateY(9px) rotate(22.5deg); } 50% { transform: translateY(18px) scale(1, .9) rotate(45deg); border-bottom-right-radius: 40px; } 75% { transform: translateY(9px) rotate(67.5deg); } 100% { transform: translateY(0) rotate(90deg); } } @keyframes shadow { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.2, 1); } }
저자: Dicson
각 사라지는 블록을 통합하고 서로 다른 사라지는 시간을 설정하면 어떻게 될까요?
<!-- loading.html --> <div class="sk-cube-grid"> <div class="sk-cube sk-cube-1"></div> <div class="sk-cube sk-cube-2"></div> <div class="sk-cube sk-cube-3"></div> <div class="sk-cube sk-cube-4"></div> <div class="sk-cube sk-cube-5"></div> <div class="sk-cube sk-cube-6"></div> <div class="sk-cube sk-cube-7"></div> <div class="sk-cube sk-cube-8"></div> <div class="sk-cube sk-cube-9"></div> </div>
/* loading.css */ .sk-cube-grid { width: 4em; height: 4em; margin: auto; } .sk-cube { width: 33%; height: 33%; background-color: #e04960; float: left; animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out; } .sk-cube-1 { animation-delay: 0.2s; } .sk-cube-2 { animation-delay: 0.3s; } .sk-cube-3 { animation-delay: 0.4s; } .sk-cube-4 { animation-delay: 0.1s; } .sk-cube-5 { animation-delay: 0.2s; } .sk-cube-6 { animation-delay: 0.3s; } .sk-cube-7 { animation-delay: 0s; } .sk-cube-8 { animation-delay: 0.1s; } .sk-cube-9 { animation-delay: 0.2s; } @keyframes sk-cube-grid-scale-delay { 0%, 70%, 100% { transform: scale3D(1,1,1); } 35% { transform: scale3D(0,0,1); } }
저자: Nicola Pressi
네 개의 낫이 앞뒤로 베고 있다면 어떻게 될까요?
<!-- loading.html --> <div class="spinner"> <div class="outer"> <div class="inner tl"></div> <div class="inner tr"></div> <div class="inner br"></div> <div class="inner bl"></div> </div> </div>
/* loading.css */ .spinner { position: absolute; width: 128px; height: 128px; top: calc(50% - 64px); left: calc(50% - 64px); transform: perspective(206px) rotateX(45deg); } .outer { box-sizing: border-box; animation: spin 3s linear infinite; height: 100%; } .inner { position: absolute; border-radius: 50%; width: 64px; height: 64px; animation: spin 1.8s ease-in-out infinite; } .inner.tl { top: 0; left: 0; border-top: 2px solid #531430; border-left: 4px solid #531430; } .inner.tr { top: 0; right: 0; border-top: 2px solid #e04960; border-right: 4px solid #e04960; } .inner.br { bottom: 0; right: 0; border-bottom: 2px solid #531430; border-right: 4px solid #531430; } .inner.bl { bottom: 0; left: 0; border-bottom: 2px solid #e04960; border-left: 4px solid #e04960; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
저자: Martin van Driel
간단한 사각형 회전과 내부 높이 제어로 채우기 효과를 얻을 수 있습니다~
<!-- loading.html --> <span class="loading"> <span class="loading-inner"></span> </span>
/* loading.css */ .loading { display: inline-block; width: 30px; height: 30px; position: relative; border: 4px solid #e04960; animation: loader 4s infinite ease; } .loading-inner { vertical-align: top; display: inline-block; width: 100%; background-color: #e04960; animation: loader-inner 4s infinite ease-in; } @keyframes loader { 0% { transform: rotate(0deg); } 25% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes loader-inner { 0% { height: 0%; } 25% { height: 0%; } 50% { height: 100%; } 75% { height: 100%; } 100% { height: 0%; } }
작가 : Josh
1 요소 스케일링은 매우 간단합니다. 15는 어떻게 될까요? ㅋㅋㅋ
작성자: 엘 Alemaño7.
<!-- loading.html -->
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
/* loading.css */
.loader {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
width: 175px;
height: 100px;
}
.loader span {
display: block;
background: #e04960;
width: 7px;
height: 100%;
border-radius: 14px;
margin-right: 5px;
float: left;
}
.loader span:last-child {
margin-right: 0px;
}
.loader span:nth-child(1) {
animation: load 2.5s 1.4s infinite linear;
}
.loader span:nth-child(2) {
animation: load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(3) {
animation: load 2.5s 1s infinite linear;
}
.loader span:nth-child(4) {
animation: load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(5) {
animation: load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(6) {
animation: load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(7) {
animation: load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(8) {
animation: load 2.5s 0s infinite linear;
}
.loader span:nth-child(9) {
animation: load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(10) {
animation: load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(11) {
animation: load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(12) {
animation: load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(13) {
animation: load 2.5s 1s infinite linear;
}
.loader span:nth-child(14) {
animation: load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(15) {
animation: load 2.5s 1.4s infinite linear;
}
@keyframes load {
0% {
background: #531430;
transform: scaleY(0.08);
}
50% {
background: #e04960;
transform: scaleY(1);
}
100% {
background: #531430;
transform: scaleY(0.08);
}
}
작은 구슬이 앞뒤로 움직이면 정말 멋진 그림을 그릴 수 있습니다
<!-- loading.html --> <div class="bars"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div>
/* loading.css */ .bars { height: 30px; left: 50%; margin: -30px 0 0 -20px; position: absolute; top: 60%; width: 40px; } .bar { background: #e04960; bottom: 1px; height: 3px; position: absolute; width: 3px; animation: sound 0ms -800ms linear infinite alternate; } @keyframes sound { 0% { opacity: .35; height: 3px; } 100% { opacity: 1; height: 28px; } } .bar:nth-child(1) { left: 1px; animation-duration: 474ms; } .bar:nth-child(2) { left: 5px; animation-duration: 433ms; } .bar:nth-child(3) { left: 9px; animation-duration: 407ms; } .bar:nth-child(4) { left: 13px; animation-duration: 458ms; } .bar:nth-child(5) { left: 17px; animation-duration: 400ms; } .bar:nth-child(6) { left: 21px; animation-duration: 427ms; } .bar:nth-child(7) { left: 25px; animation-duration: 441ms; } .bar:nth-child(8) { left: 29px; animation-duration: 419ms; } .bar:nth-child(9) { left: 33px; animation-duration: 487ms; } .bar:nth-child(10) { left: 37px; animation-duration: 442ms; }
저자: Richie
9. "접착제" 로딩
각 원이 접착되고 분할되어 접착 효과를 형성합니다
<!-- loading.html -->
<div class="loading">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
<div class="inner four"></div>
</div>
rrree
10.
/* loading.css */
.loading {
position: absolute;
top: calc(50% - 24px);
left: calc(50% - 24px);
width: 48px;
height: 48px;
border-radius: 50%;
transform: perspective( 128px ) rotateX( 30deg );
}
.inner {
position: absolute;
box-sizing: border-box;
width: 16px;
height: 16px;
background-color: #e04960;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: move-right 1s ease-out infinite;
}
.inner.two {
right: 0%;
top: 0%;
animation: move-down 1s ease-in-out infinite;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: move-left 1s ease-in-out infinite;
}
.inner.four {
left: 0%;
bottom: 0%;
animation: move-up 1s ease-out infinite;
}
@keyframes move-right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(32px);
}
}
@keyframes move-down {
0% {
transform: translateY();
}
100% {
transform: translateY(32px);
}
}
@keyframes move-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-32px);
}
}
@keyframes move-up {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-32px);
}
}
<!-- loading.html -->
<div class="container">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
11. "스위치" 로드
/* loading.css */
.container {
width: 200px;
height: 100px;
margin: 0 auto;
}
.ball {
width: 10px;
height: 10px;
margin: 10px auto;
border-radius: 50px;
}
.ball:nth-child(1) {
background: #e04960;
-webkit-animation: right 1s infinite ease-in-out;
-moz-animation: right 1s infinite ease-in-out;
animation: right 1s infinite ease-in-out;
}
.ball:nth-child(2) {
background: #e04960;
-webkit-animation: left 1.1s infinite ease-in-out;
-moz-animation: left 1.1s infinite ease-in-out;
animation: left 1.1s infinite ease-in-out;
}
.ball:nth-child(3) {
background: #e04960;
-webkit-animation: right 1.05s infinite ease-in-out;
-moz-animation: right 1.05s infinite ease-in-out;
animation: right 1.05s infinite ease-in-out;
}
.ball:nth-child(4) {
background: #e04960;
-webkit-animation: left 1.15s infinite ease-in-out;
-moz-animation: left 1.15s infinite ease-in-out;
animation: left 1.15s infinite ease-in-out;
}
.ball:nth-child(5) {
background: #e04960;
-webkit-animation: right 1.1s infinite ease-in-out;
-moz-animation: right 1.1s infinite ease-in-out;
animation: right 1.1s infinite ease-in-out;
}
.ball:nth-child(6) {
background: #e04960;
-webkit-animation: left 1.05s infinite ease-in-out;
-moz-animation: left 1.05s infinite ease-in-out;
animation: left 1.05s infinite ease-in-out;
}
.ball:nth-child(7) {
background: #e04960;
-webkit-animation: right 1s infinite ease-in-out;
-moz-animation: right 1s infinite ease-in-out;
animation: right 1s infinite ease-in-out;
}
@-webkit-keyframes right {
0% {
-webkit-transform: translate(-15px);
}
50% {
-webkit-transform: translate(15px);
}
100% {
-webkit-transform: translate(-15px);
}
}
@-webkit-keyframes left {
0% {
-webkit-transform: translate(15px);
}
50% {
-webkit-transform: translate(-15px);
}
100% {
-webkit-transform: translate(15px);
}
}
@-moz-keyframes right {
0% {
-moz-transform: translate(-15px);
}
50% {
-moz-transform: translate(15px);
}
100% {
-moz-transform: translate(-15px);
}
}
@-moz-keyframes left {
0% {
-moz-transform: translate(15px);
}
50% {
-moz-transform: translate(-15px);
}
100% {
-moz-transform: translate(15px);
}
}
@keyframes right {
0% {
transform: translate(-15px);
}
50% {
transform: translate(15px);
}
100% {
transform: translate(-15px);
}
}
@keyframes left {
0% {
transform: translate(15px);
}
50% {
transform: translate(-15px);
}
100% {
transform: translate(15px);
}
}
<!-- loading.html -->
<div class="loading">
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="6.3" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 14 -4" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
프로그래밍 입문을 방문하세요! !
위 내용은 프로젝트를 빛나게 만들어 줄 10개 이상의 CSS 로딩 효과, 와서 수집해보세요! !의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!