다연이네

[days05] 1) 로딩 이미지 처리 2) 이미지 흔들기 본문

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>
반응형
저작자표시 비영리

'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