Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 갤러리
- 에어팟 짝퉁
- keyframes
- 헤이 시리
- Loading
- 에어팟 2
- acro i8
- 아이폰
- java
- 애니메이션
- html
- 배경화면
- 기초
- apple
- css
- 짱구 배경화면 모음
- Tag
- 자바스크립트
- 배경화면 모음
- 연산자
- 에어팟
- 애플
- JavaScript
- 로딩
- 노래 넣기
- 웹페이지
- hover
- 백그라운드 재생
- 핸드폰 배경화면
- animation
Archives
- Today
- Total
목록키프레임 (1)
IT 블로그
CSS 로딩 애니메이션 예제 - 1
CSS 로딩 애니메이션 예제 - 1 이번만들 예제는 css의 @keyframes(키프레임)라는 애니메이션 요소를 활용해 위와 같이 로딩중에 사용 할 수 있는 로딩 애니메이션을 만들어 보자. css keyframes의 사용법만 알고 있다면 이전 포스팅에 비해 간단한 예제고 소스 코드도 몇줄 안나온다 ㅋㅋㅋ 구현하기 먼저 로딩을 위한 html을 작성해 주자 별거 없다 엄청 간단하다 3줄 이다.. 이전 포스팅에 만든 filp 애니메이션이랑 같은 원리로 원근감을 주어야 하기때문에 애니메이션시킬 요소를 한번더 감싸주었다. 123 이제 flip-box의 css를 작성해 보자. flip-box는 감싸는 요소로 원하는데로 지정해 주면된다. 나는 예제와 같게 아래와 같이 지정했다. 원근감을 줘야하기 때문에 perspec..
프로그래밍/css
2018. 10. 3. 10:28