고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
css 를 이용하여 배경색을 변경하는 코드입니다.
10초의 간격을 두고 검은색에서 붉은색으로 천천히 변경되기를 반복하게 됩니다.
@keyframes 으로 animateBackground 라는 변수에 애니메이션에 대한 설정을 하게 되는데요
0%는 시작, 50%는 중간, 100%는 애니메이션의 끝을 나타냅니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<style>
.background-animation {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-color: #000;
animation: animateBackground 10s infinite;
}
@keyframes animateBackground {
0% {
background-color: #000;
}
50% {
background-color: #ff0000;
}
100% {
background-color: #000;
}
}
</style>
<div class="background-animation"></div>
</body>
</html>
|
cs |
참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다.
각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요
https://cafe.naver.com/ingsuccess
성공하는 중이다 : 네이버 카페
성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!
cafe.naver.com
반응형
'IT공부방 > HTML5, CSS' 카테고리의 다른 글
| selectbox 이쁘게 만들기, select2 라이브러리로 이쁘게, 그룹으로 묶기까지 (0) | 2023.06.21 |
|---|---|
| CSS 텍스트 형광펜 효과주기/ 전체 형광/ 절반만 형광 (0) | 2023.06.16 |
| css를 이용해서 html table에 효과주기 기본, 마우스오버, 라인배경색, 모바일 최적화 (0) | 2023.06.14 |
| css버튼 이쁘게 꾸미기, 애니메이션 효과주기 (0) | 2022.08.05 |
| CSS 그라데이션 적용하기 ... linear-gradient (0) | 2020.12.02 |
댓글 영역