Jam's story

[CSS] css 애니메이션 -로딩이미지처리 ,이미지 흔들기 본문

WEB/CSS

[CSS] css 애니메이션 -로딩이미지처리 ,이미지 흔들기

애플쩀 2022. 5. 27. 09:19

로딩이미지 

Document 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .loader{
            width:120px;
            height: 120px;
            border: 16px solid #f3f3f3;
            border-top-color: red;
            border-radius: 50%;
            animation: spin 1.5s linear infinite;
        }
        @keyframes spin{
            0%{
                transform: rotate(0deg);
            }100%{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="loader"></div>
</body>
</html>

 

 

이미지 흔들기 

Document 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 150px;
            border: 1px solid #ddd;
            padding: 5px;
            border-radius: 4px;
        }
        img:hover{
            box-shadow: 0 0 2px 1px rgba(0, 240, 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>
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">
 <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfOTMg%2FMDAxNjUwNTExNjMwNzc2.AmCDb22f7FET4IrkaFIm7PBP_5f_7eW0eW1hIXVkyX4g.i_nNxUTsl1mluLrHdVVdL36RwlhsM8agei3rFc1SPkwg.JPEG.sunyoung605%2FIMG_1699.jpg&type=a340" alt="">   
</body>
</html>

 

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] 미디어타입  (0) 2022.05.27
[CSS] 애니메이션 효과  (0) 2022.05.26
[CSS] 2D, 3D 변환 transform, translate  (0) 2022.05.26
[CSS] 2D 변환  (0) 2022.05.26
[CSS] 웹글꼴  (0) 2022.05.26
'WEB/CSS' Related Articles more
Comments