반응형
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 |
Tags
- isinterrupted()
- first-child
- 리눅스셋팅
- Linux세팅
- 스레드그룸
- 아이디중복
- InputDialog
- StringReader
- 메모리스트림
- MemoryStream
- StringWriter
- ThreadGroup()
- 상관 서브 쿼리
- first-of-child
- include지시자
- 동기화
- interrupt()
- include액션태그
- char[] String 형변환
- 상관서브쿼리
- 리눅스세팅
- Linux셋팅
- 표현 언어
- sleep()메소드
- include 지시자
- ObjectInputStream
- ID중복
- String char[] 형변환
- Daemon()
- interrupted()
Archives
- Today
- Total
다연이네
[days05] 1) 로딩 이미지 처리 2) 이미지 흔들기 본문
반응형
로딩 파랑색이 계속 돌고, 파인애플 아무 사진에나 마우스 올리면 떨린다. (마치 아이폰 앱 정렬하듯이)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.loader{
width: 120px;
height: 120px;
border: 16px solid #f3f3f3;
border-top-color: #3498DB;
border-radius: 50%;
animation:spin 1.5s linear infinite;
/* 로딩중 -> gif로 안만들고 이렇게 한다
1. 확대해도 해상도가 안깨지고 2. 수정이 쉽다 3. 속도도 빠르다 */
}
@keyframes spin{
from{ transform: rotate(0deg);}
to{ transform: rotate(360deg);}
}
</style>
<style>
img{
width: 150px;
border: 1px solid #ddd;
padding: 5px;
border-radius: 4px;
}
img:hover{
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
animation: shake 0.5s infinite;
}
@keyframes shake{
0%{ transform: translate(1px, 1px) rotate(0deg);}
10%{ transform: translate(-1px, -1px) rotate(-1deg);}
20%{ transform: translate(3px, 1px) rotate(1deg);}
30%{ transform: translate(3px, 2px) rotate(0deg);}
40%{ transform: translate(1px, -1px) rotate(1deg);}
50%{ transform: translate(-1px, 1px) rotate(-1deg);}
60%{ transform: translate(2px, -1px) rotate(0deg);}
70%{ transform: translate(-1px, 1px) rotate(1deg);}
80%{ transform: translate(3px, -1px) rotate(-1deg);}
90%{ transform: translate(1px, 3px) rotate(0deg);}
100%{ transform: translate(1px, -2px) rotate(1deg);}
}
</style>
</head>
<body>
<h3>로딩 이미지 처리</h3>
<div class="loader"></div>
<h3>이미지(창) 흔들기</h3>
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
<img src="../images/pineapple.jpg" alt="" />
</body>
</html>반응형
'Web > CSS' 카테고리의 다른 글
| [days05] CSS 전역변수와 document.querySelector (0) | 2020.12.09 |
|---|---|
| [days05] 툴팁(Tooltip) (0) | 2020.12.09 |
| [days05] CSS 애니메이션 (0) | 2020.12.09 |
| [days05] CSS 전환 - transition (0) | 2020.12.09 |
| [days05] CSS 3D 변환 - transform (0) | 2020.12.09 |
'Web/CSS' Related Articles
more
Comments