CSS 애니메이션으로 웹사이트를 다이내믹하게 만들기
목차
소개
In this blog we will take a look at creating a simple animation to help dynammise a website. Movement attracts attention and thus CSS animations are perfect for captivating your audiance.
However remember to not do to many animations, the goal isn't to loose the audiance in this blog we will look at how to make an animated logo to captivate your audiance to look at it.
We will look at the animation I made on one of my temporary landing page. https://火.dev/로고 및 결과
Here is what the logo looks like:
로고가 애니메이션처럼 보일 것입니다.
HTML 레이아웃
<div class="fire">
<div class="fire-left">
<div class="main-fire"></div>
<div class="particle-fire"></div>
</div>
<div class="fire-main">
<div class="main-fire"></div>
<div class="particle-fire"></div>
</div>
<div class="fire-right">
<div class="main-fire"></div>
<div class="particle-fire"></div>
</div>
<div class="fire-bottom">
<div class="main-fire"></div>
</div>
</div>
We can see here we have four fire components:
- The left flame
- The middle flame
- The right flame
- The bottom glow
불꽃 만들기
We will take a look at the middle flame since the left and right are just a smaller version.
Here is the CSS code:
.fire-main {
position: absolute;
height: 100%;
width: 100%;
animation: scaleUpDown 3s ease-out;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.fire-main .main-fire {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(farthest-corner at 10px 0, #d43300 0%, #ef5a00 95%);
transform: scaleX(0.8) rotate(45deg);
border-radius: 0 40% 60% 40%;
filter: drop-shadow(0 0 10px #d43322);
}
fire-main
being the parent div we make sure that it uses all the height and width of the parent div. It is also on this dive were we are casting the animation.
We say the animation should play for 3s
and ease-out
and that it should iterate for infinite
.
main-fire
is were we replicate the flame. This is quite simple. Using border-radius: 0 40% 60% 40%;
we can create a nice tear drop we then finish the orientation and scaling with transform: scaleX(0.8) rotate(45deg);
입자 만들기
To make the fire more realistic lets build some small particle that floats up.
.fire-main .particle-fire {
position: absolute;
top: 60%;
left: 45%;
width: 10px;
height: 10px;
background-color: #ef5a00;
border-radius: 50%;
filter: drop-shadow(0 0 10px #d43322);
animation: particleUp 2s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
Since the width
and height
have the same value of 10px
coupled with a border-radius: 50%
it gives us a circle. adding a little drop-shadow
to be able to really give a sense of depth.
화염 애니메이션
The idea of the flam animation is pretty simple. We start off at the normal size we then make the flam grow taller then grow smaller while making it thinner.
@keyframes scaleUpDown {
0%,
100% {
transform: scaleY(1) scaleX(1);
}
50%,
90% {
transform: scaleY(1.2);
}
75% {
transform: scaleY(0.95);
}
80% {
transform: scaleX(0.55);
}
}
Let's take a look at this by time (percentage of animation completed):
-
0% the flame is scaled to
(1,1)
(x,y) -
50% taller flame scaled to
(1, 1.2)
-
75% smaller flame scaled to
(1, 0.95)
-
80% thinner flame scaled to
(0.55, 0.95)
-
90% taller flame scaled to
(0.55, 1.2)
-
100% normal flame scaled to
(1,1)
입자 애니메이션
The particle animation is pretty simple it is a simple going up animation mixed with some opacity changes.
@keyframes particleUp {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
top: -100%;
transform: scale(0.5);
}
}
Let's take a look at this by time (percentage of animation completed):
-
0% the flame is invisible
opacity: 0;
-
20% the flame is visible
opacity: 1;
-
80% the flame is visible
opacity: 1;
-
100% the flame moves to top
top: -100%;
and is invisibleopacity: 0;
and smallertransform: scale(0.5);
If you are not used to CSS animations you might be wondering why should we have the same line for 20% and 80%. WWell te way animations work are per the last change. Hence if I didnt have the 80% from 20% to 100% it would slowly change the opacity to 0. However if we want a faster opacity change and only at the end but saying at 80% that opacity: 1;
then it will only become 0
between 80% and 100%
글로우 애니메이션
The last touch to this flame animation is the glow.
for this we have a very simple div with the following style:
.fire-bottom .main-fire {
position: absolute;
top: 30%;
left: 20%;
width: 75%;
height: 75%;
background-color: #ff7800;
transform: scaleX(0.8) rotate(45deg);
border-radius: 0 40% 100% 40%;
filter: blur(10px);
animation: glow 2s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
Most of this css is the same as the simple flame we saw above the main difference comes from filter: blur(10px);
this will give a sligh blur to our flame shape.
Taking a look at the glow animation:
@keyframes glow {
0%,
100% {
background-color: #ef5a00;
}
50% {
background-color: #ff7800;
}
}
we simply see that we change the color from a dark orange to light orange.
결론
We can see that quite easily and using only HTML and CSS3 that we can really capture user attention to the logo. This can easily help with the branging. this can be used on a very simple login page for instance with either a two panel (logo left, login form right) or a simple logo above the login form.
Reference
이 문제에 관하여(CSS 애니메이션으로 웹사이트를 다이내믹하게 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/crimsonmed/dynamizing-your-webite-with-css-animations-3a45텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)