제목: [1HCC] DAY - ## - 제목
[학습내용]
언어: CSS
학습자료: Pure CSS Shooting Star Animation Effect | CSS Only (youtube.com)
배운 것: 애니메이션, 오브젝트 애니메이션
학습내용 상세
[HTML]
<!DOCTYPE HTML>
<html lang = "en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0">
<link rel="stylesheet" style="text/css" href="styles.css" />
<title>CSS Shooting Stars Animation</title>
</head>
<body>
<section>
<span></span>
</section>
</body>
</html>
"span" 태그를 활용하여 오브젝트를 생성하고 CSS를 활용하여 애니메이션 효과를 만든다.
[CSS]
*
{
margin:0;
padding:0;
box-sizing: boarder-box;
}
- "*"는 모든 CSS에 적용되는 양식으로 여백이 없도록 페이지를 설정한다.
- "box-sizing: boarder-box"는 padding과 border가 전체 가로 세로 크기 안에 포함되도록 설정한다.
body
{
overflow: hidden;
}
- "overflow: hidden"은 설정된 화면을 초과하는 내용은 표시하지 않고 감추도록 설정한다.
section
{
position:absolute;
top:0;
left:40px;
width:100%;
height:100vh;
background: url(bg3.jpg);
background-position-x: center;
background-size: cover;
animation: animateBg 50s linear infinite;
}
- "position: absolute" 다른 요소들과 상관 없이 절대적인 위치에 배치하도록 설정
- "top:0", "left:40px" 시작 위치를 위에서 0, 왼쪽에서 40pixel로 설정
- "width: 100%", "height:100vh" 웹브라우저 가로 100% 세로 100%에 맞춤 설정
- "background: url(bg3.jpg)" 배경화면 그림 지정
- "background-position-x: center", "background-size: cover" section을 중심에 배경을 두고 section 다 덮도록 배경화면 지정
- "animation: animateBg 50s linear infinite" animateBg라는 수직 애니메이션 효과를 50초에 걸쳐 무한대로 반복
@keyframes animateBg
{
0%, 100%
{
transform: scale(1.0);
}
50%
{
transform: scale(1.1);
}
}
- "@keyframes" section 배경의 애니메이션 효과를 어떻게 설정할지 정의
- 0% 그리고 100%일 때 배경화면의 크기 1배, 50%일 때 1.1배로 설정
span
{
position: absolute;
top: 100%;
left: 50%;
width: 0.1px;
height: 0.1px;
background: #fff;
border-radius: 100%;
box-shadow: 0 0 0 0.1px rgba(255,255,255,0.1),
0 0 0 0.1px rgba(255,255,255,0.05),
0 0 0.1px rgba(255,255,255,1);
animation: animate 3s linear infinite;
}
- "position: absolute" span을 절대적 위치에 배치
- "top: 100%", "left: 50%" span 영역의 위 100%, 왼쪽 50% 부분에 배치
- "width: 0.1px", "height: 0.1px" 크기 설정
- "background: #fff", "border-radius: 100%" 하얀 배경에 동그란 모양 설정
- "box-shadow: 0 0 0 0.1px rgba(255,255,255,0.1), 0 0 0 0.1px rgba(255,255,255,0.05), 0 0 0.1px rgba(255,255,255,1)" 늘어나는 그림자 모양 효과 적용
- "animation: animate 3s linear infinite" animate라는 애니메이션 효과에 따라 3초간 동작, 무한반복
span::before
{
content: '';
position: absolute;
top:50%;
transform: translateY(-50%);
width:100px;
height:1px;
background: linear-gradient(90deg, #fff, transparent);
}
- "The span::before" 요소 생성
- "content: ' ';
position: absolute;
top:50%;
transform: translateY(-50%);
width:100px;
height:1px;
background: linear-gradient(90deg, #fff, transparent);"
세로 기준 중심에 놓인 길다란 흰색 꼬리 효과 생성
@keyframes animate
{
0%
{
opacity: 0;
transform: rotate(340deg) translateX(0);
}
15%, 70%
{
opacity: 0.5;
}
30%, 50%
{
opacity: 1;
}
100%
{
transform: rotate(340deg) translateX(-1000px);
opacity: 0;
}
}
- animate 애니메이션 효과 정의
- 애니메이션 진행별 투명도 및 모양 변화 효과 지정
span:nth-child(1)
{
top:0;
right:100px;
left:initial;
animation-delay: 0s;
animation-duration:3s;
}
- span의 첫번째 요소 설정
- 위치 지정 및 애니메이션 효과, 지연 없이 3초간 애니메이션 작동
[결과물]
'One Hour Coding Challenge' 카테고리의 다른 글
| [1HCC] DAY - 006 - 애니메이션 효과 삽입 (0) | 2024.03.20 |
|---|---|
| [1HCC] DAY - 005 - JavaScript 변수 삽입 (1) | 2024.02.27 |
| [1HCC] DAY - 004 - Footer 삽입 (0) | 2024.02.22 |
| [1HCC] DAY - 003 - 메뉴바 꾸미기 (0) | 2024.02.21 |
| [1HCC] DAY - 001 - HTML 템플레이트 (0) | 2024.01.23 |
댓글