WEB animation & effect
glowing icon & text
SeaPlus
2021. 9. 11. 17:16
크게 2가지 애니메이션으로 분류 가능하다.
1. 계속 전환되는 배경색 애니메이션
2. 늘었다 줄었다 하는 text 애니메이션
[배경 효과]
- 총 3개의 레이어로 구성되어 있다.( 배경이미지 레이어 1개, 조명 2개)
- 배경이미지는 "그라데이션 효과 + 벽돌 이미지" 로 구성되어 있는데
"background-blend-mode: multiply;" 로 혼합해서 구성 했다.
- 2개의 조명은 배경의 after, before 가상선택자로 구현했다.
[1. 배경색 애니메이션]
- hue-rotate 속성을 통해 색조 회전을 한다.
- "색조 회전"을 적용하기 전에 배경색상은 정해져 있어야 한다.
@keyframes animateBgColor {
0% {
/* hue-rotate -> 색조회전 */
/* 배경색이 지정이 되 있어야 한다. */
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
[2. Text 애니메이션]
- text를 담고 있는 h2 의 width의 길이가 123.16px 이다.
- width가 1px로 줄어들었다 123.16px로 늘어나는 애니메이션을 반복한다.
- 0%->30% 는 width:1px -> 123.16px 로 늘어나고 30%->60%까지는 유지
- 60%->90%는 width:123.16px -> 1px로 줄어들고 90%->100%까지 유지
- "animation-timing-function : steps(n)" = 애니메이션이 n번에 나눠 끊어지듯이 진행
[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Glory&display=swap"
rel="stylesheet"
/>
</head>
<body>
<section>
<div class="icon">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="twitter"
class="svg-inline--fa fa-twitter fa-w-16"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
></path>
</svg>
<h2>Twitter</h2>
<!-- count total number of character in h2 text = 7 -->
</div>
</section>
</body>
</html>[CSS]
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
font-family: "Glory", sans-serif;
}
/* 배경만들기 */
section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(#f00, rgba(0, 0, 0, 0.5)), url(./wall.jpg);
/* background-blend-mode 는 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의한다. */
background-blend-mode: multiply;
background-size: cover;
animation-name: animateBgColor;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes animateBgColor {
0% {
/* hue-rotate -> 색조회전 */
/* 배경색이 지정이 되 있어야 한다. */
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
/* 조명1 만들기 */
section::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
/* background: transparent를 적용한 이유는 미리 다른 배경 색상이 설정되어 있을 경우 충돌을 막기위해 */
background: radial-gradient(rgba(255, 0, 0, 0.75), transparent, transparent);
border-radius: 50%;
}
/* 조명2 만들기 */
section::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 800px;
/* background: transparent를 적용한 이유는 미리 다른 배경 색상이 설정되어 있을 경우 충돌을 막기위해 */
background: radial-gradient(rgba(255, 0, 0, 0.75), transparent, transparent);
border-radius: 50%;
}
.icon {
position: relative;
z-index: 1;
width: 200px;
height: 200px;
text-align: center;
}
.icon h2 {
display: inline-block;
position: relative;
color: #fff;
font-size: 2em;
font-weight: normal;
text-shadow: 0 10px 10px #000;
overflow: hidden;
animation-name: textTyping;
animation-duration: 5s;
animation-timing-function: steps(7);
animation-iteration-count: infinite;
}
/* text animation */
/* width가 1px로 줄어들었다 123.16px늘어난다. */
/* animation 은 steps 속성으로 끊어져서 진행되기때문에 타자치는 효과로 보인다. */
@keyframes textTyping {
0%,
90%,
100% {
width: 1px;
}
30%,
60% {
/* text를 담고있는 요소의 width 길이 */
width: 123.16px;
}
}
/* icon svg 조작 */
.icon svg path {
/* stroke -> 테두리 */
stroke: #fff;
stroke-width: 10px;
/* 내부 색상 투명하게 */
fill: transparent;
/* 그림자 생성 */
filter: drop-shadow(0 20px 10px #000) blur(2px);
}