앞에 표정 애니메이션을 조금 변형하여 로딩화면을 만들어보았습니다.
html
<body id="loading1">
<div class="loading1">
<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 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>
<div class="wait">1분 이상 걸릴 수 있습니다.<br>
잠시만 기다려주세요.</div>css
#loading1{
margin: 0;
padding: 0;
background: black;
display: flex;
box-sizing: border-box;
}
.loading1{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 200px;
display:flex;
}
.bar{
width: 6px;
height: 80px;
background: #337ab7;
margin: 0 3px;
border-radius: 10px;
animation: loading 0.8s infinite;
box-shadow:
0 0 60px #337ab7,
0 0 100px #337ab7;
}
.bar:nth-child(2){
animation-delay: 0.1s;
}
.bar:nth-child(3){
animation-delay: 0.2s;
}
.bar:nth-child(4){
animation-delay: 0.3s;
}
.bar:nth-child(5){
animation-delay: 0.7s;
}
.bar:nth-child(6){
animation-delay: 0.6s;
}
.bar:nth-child(7){
animation-delay: 0.4s;
}
.bar:nth-child(8){
animation-delay: 0.8s;
}
.bar:nth-child(9){
animation-delay: 0.3s;
}
.bar:nth-child(10){
animation-delay: 0.4s;
}
.bar:nth-child(11){
animation-delay: 0.5s;
}
.bar:nth-child(12){
animation-delay: 0.6s;
}
.bar:nth-child(13){
animation-delay: 0.5s;
}
.bar:nth-child(14){
animation-delay: 0.4s;
}
.bar:nth-child(15){
animation-delay: 0.6s;
}
.bar:nth-child(16){
animation-delay: 0.4s;
}
.bar:nth-child(17){
animation-delay: 0.8s;
}
.bar:nth-child(18){
animation-delay: 0.3s;
}
.bar:nth-child(19){
animation-delay: 0.4s;
}
@keyframes loading{
0%{
height: 0;
}
50%{
height: 60px;
}
100%{
height: 0;
}
}
.wait{
position:absolute;
top: 58%;
left: 50%;
transform: translate(-50%,-50%);
height: 200px;
display:flex;
align-items: center;
font-size: 14px;
font-weight: bold;
text-align: center;
}
1. @keyframes 속성 이용하기
키프레임 속성으로 이용하여 loading이라는 애니메이션 이름을 지정한 후 0%일 때에는 높이가 0px, 50%로 갈수록 60px이 되었다가 50%를 기점으로 다시 0으로 돌아가게 설정하였습니다.
@keyframes loading{
0%{
height: 0;
}
50%{
height: 60px;
}
100%{
height: 0;
0 }
2. box-shadow를 없앤 경우 (그림자 효과)
심플한 바코드같은 느낌이 됩니다. 개인적으로 심플한 모던 스타일을 좋아해서 제일 마음에 듭니당
.bar{
width: 6px;
height: 80px;
background: black;
margin: 0 3px;
border-radius: 10px;
animation: loading 0.8s infinite;
/*
box-shadow:
0 0 60px #337ab7,
0 0 100px #337ab7;
*/
}
3. filter 속성의 hue-rotate
위의 1번과 같은 방법으로 hue-rotate효과를 주었습니다.
hue-rotate : 원본 이미지에 대한 상대적 색조의 변화 값입니다. 양수로 설정하여 회전하면 색조 값을 증가시키고 반대(음수)의 회전은 색조 값을 감소시킵니다.
deg(각도)를 지정할 수 있으며, 0 인 경우, 360deg, 720deg 경우에는 변화가 없습니다.
animation: loading 0.8s infinite;
0%{filter: hue-rotate(0deg);}
100%{filter: hue-rotate(360deg);} @keyframes animateBg {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
즉, 0%일때는 변화가 없으며 100%로 갈 수록 색상표의 색조 값을 점점 가지게 되다가 360도까지 가서 원점으로 돌아가게 됩니다.
.loading1{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 200px;
display:flex;
align-items: center;
animation: animateBg 10s linear infinite;
}
@keyframes animateBg
{
0%{filter: hue-rotate(0deg);}
100%{filter: hue-rotate(360deg);}
}
'html & css3' 카테고리의 다른 글
| [웹디자인/html/css] 웹호스팅에 파일 업로드하기 / 필수 확인 사항들 (0) | 2020.11.29 |
|---|---|
| @keyframes 과 animation 속기형/animation-direction (0) | 2020.11.23 |
| [html/css] css animation 만들기 (0) | 2020.11.21 |
| [html/css] <dl>-<dt>-<dd> 태그 vs <th>-<tr>-<td> table 속성 (0) | 2020.11.20 |
| [html/css] dl dt dd 태그 테이블처럼 사용하기, 반응형에서 줄바꿈 적용하기 (0) | 2020.11.18 |
