유튜브를 보다가 신기한 장식을 발견했다. 예전에 아이언맨 2를 보았을 때 인상깊게 보았던 장식이였다.
이 장식은 'swinging stick'이라고 하는 빙글빙글 도는 장식인데, 오늘은 이것을 css을 이용하여 만들어 볼 것이다.
우선 html을 짜주었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="./swing.css">
</head>
<body>
<div class="swing">
<span style="color: red;">swinging stick</span>
<div class="bar">
<div class="bar2"></div>
</div>
</div>
</body>
</html>
적은 요소가 들어가기 때문에 짧게 마무리 해줬다.
다음은 css
*{
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.swing {
width: 60px;
height: 100vh;
background-color: rgb(24, 22, 22);
border: 2px solid gray;
position: relative;
}
.bar {
width: 700px;
height: 10px;
position: absolute;
top: 45%;
background-color: black;
border: 1px solid rgb(37, 11, 11);
animation: bar 70s linear infinite;
}
.bar2 {
width: 400px;
height: 5px;
position: absolute;
top: 45%;
border: 4px solid #000;
animation: bar2 3s linear infinite;
}
.swing span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: swing 1s linear infinite;
}
css초기화는 마진과 패딩만 지정해 줬다.
'body'의 높이를 '100vh'로 지정해주고 'display:flex;'로 지정해 줬다.
'.swing 은 기둥역할을 해주는 클래스다. 가로너비를 '60px' 높이를 부모 요소의 100%로 지정해 주고, 'position: relative;'를 줘서 자식요소에 포함 되어 있는 'absolute'의 기준이 되게 하였다.
'.bar, .bar2'는 'swinging stick'의 핵심이다. 가로, 높이를 지정해 주고 'position: absolute'를 사용하여 'bar'의 위치는 가운데로 'bar2'의 위치는 'bar'의 끝부분에 위치하게 만들었다. 나중에 지정할 'animation'도 미리 지정해 주었다.
'swing sapn'은 'swing' 기둥에 새겨진 글자를 가운데로 옮기는 역할을 했다. 마찬가지로 'position: absolute'를 사용 후,
'transform: translate (-50%, -50%);'를 사용해 기둥의 가운데에 글자가 위치하게 지정했다.
다음은 애니메이션 설정이다.
@keyframes bar {
0% {
transform: translateX(-45%) rotate(0deg);
}
10% {
transform: translateX(-45%) rotate(-0.5turn);
}
20% {
transform: translateX(-45%) rotate(0.05turn);
}
30% {
transform: translateX(-45%) rotate(-0.6turn);
}
40% {
transform: translateX(-45%) rotate(0.7turn);
}
55% {
transform: translateX(-45%) rotate(-0.88turn);
}
70% {
transform: translateX(-45%) rotate(1turn);
}
80% {
transform: translateX(-45%) rotate(2.2turn);
}
100% {
transform: translateX(-45%) rotate(0.6turn);
}
}
@keyframes bar2 {
0% {
transform: translateX(-45%) rotate(0);
}
100% {
transform: translateX(-45%) rotate(360deg);
}
}
@keyframes swing {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes를 사용해 'bar'가 일정한 간격으로 방향을 바꾸며 계속 회전하게 설정해 주었고, 'bar2' 는 한 방향으로 360도로 계속 돌게 지정했다. 마지막으로 'swing'은 기둥에 새겨진 글자의 'opacity' 값을 계속 변경해 줘서 사라졌다가 생기는 것을 반복하게 설정했다.
완성된 결과물이다.
조금 허접하긴 하지만 그래도 얼추 모양새는 맞췄으니 만족한다. 나중에 시간이나면 조금 더 다듬어서 올려보겠다.
'연습 > CSS' 카테고리의 다른 글
| CSS - 반응형 웹 연습 (1) | 2024.09.04 |
|---|---|
| CSS - 문서 작성 연습 "Snap" (0) | 2024.08.06 |
| CSS - 문서 작성 연습 "Feane" (1) | 2024.08.04 |
