Web/CSS
[days05] 1) 로딩 이미지 처리 2) 이미지 흔들기
다연
2020. 12. 9. 17:55
반응형
로딩 파랑색이 계속 돌고, 파인애플 아무 사진에나 마우스 올리면 떨린다. (마치 아이폰 앱 정렬하듯이)
<!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>반응형