WEB animation & effect
Aurora UI
SeaPlus
2021. 9. 6. 18:14
오로라 UI를 만드는 방법은 총 2가지 이다.
1. 요소3개를 만든뒤 각자 다른 색상을 주고 겹쳐 오로라 효과를 연출한다.
2. background-image 속성의 radial-gradient를 통해 간편하게 오로라 효과 연출이 가능하다.
원래라면 2번째의 방법이 훨씬 간편하고 태그사용도 적지만 동적인 애니메이션 효과를 부여하기 위해서는 1번 방법을 사용해야 한다.
- HTML요소 3개 생성 후 각각의 위치를 top, left, right , bottom등을 이용해 겹쳐놓는다.
- 요소 3개는 absolute position이고 3개의 요소를 감싸고 있는 태그 .wrap 이 relative 이기때문에 위치조정이 자연스럽 게 가능하다.
- transform을 사용해 애니메이션 효과를 부여한다.
- rotate() 메소드는 해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전시킵니다.
주어진 각도가 양수이면 시계 방향으로, 음수이면 반시계 방향으로 회전시킵니다.
- 마지막으로 완성된 디자인에 오로라처럼 꾸기미 위해서는 blur속성으로 각 요소가 겹치는 영역을 뿌옇게 처리하고 opacity로 투명도를 부여해 자연스럽게 꾸민다.
* {
box-sizing: border-box;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
background: #fff;
border-radius: 40px;
}
.aurora-base {
position: absolute;
/* blur속성으로 각 요소가 겹치는 영역을 뿌옇게 처리하고 opacity로 투명도를 부여해 자연스럽게 꾸민다 */
filter: blur(50px);
opacity: 0.7;
}
.auroroa-one {
z-index: 3; /* 첫 번째 그라데이션이 맨 앞으로 오도록 조정 */
left: -50px;
top: -300px;
width: 500px;
height: 600px;
border-radius: 100%;
background-color: #50c8ec;
}
.auroroa-two {
bottom: -30px;
left: -80px;
width: 800px;
height: 800px;
background-color: #339c4e;
}
.auroroa-three {
bottom: -80px;
right: -200px;
width: 450px;
height: 450px;
border-radius: 50%; /* 그라데이션이 부드럽게 겹치도록 영역을 좀더 둥글게 */
background-color: #6658b3;
}
.anim1 {
animation-name: fly;
animation-duration: 12s;
animation-timing-function: linear; /*애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.*/
animation-iteration-count: infinite;
transform: rotate(0) translate(80px) rotate(0);
}
.anim2 {
animation-name: flyPlus;
animation-duration: 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform: rotate(0) translate(100px) rotate(0);
}
@keyframes fly {
100% {
transform: rotate(1turn) translate(100px) rotate(-1turn);
}
}
@keyframes flyPlus {
100% {
transform: rotate(-1turn) translate(100px) rotate(1turn);
}
}
/* 쉽고빠른 요즘 그라데이션 효과 */
/* "background-image" 속성은 여러 개의 배경 그러데이션을 나열해서 하나의 요소에 적용할 수 있다. */
/* radial-gradient()를 여러 개 쉼표로 구분해서 나열하면 여러 색상이 혼합된 그라데이션 배경을 만들 수 있다. */
/* .wrap-gradient {
width: 400px;
height: 400px;
border-radius: 40px;
background-color: #fff;
background-image: (at top left, #84e27b, transparent),
radial-gradient(at top right, #bdffe4, transparent),
radial-gradient(at bottom left, #0a4c7b, transparent);
} */