웹프로그래밍

Global It Leader!!


CSS


 
 

Down 스크롤 애니메이션 소스

페이지 정보

작성자 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 2,084회 작성일 21-06-07 00:06

본문

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

<style>

.btn_scroll{display:block;position:absolute;top:calc(50% + 300px);right:25px;width:84px;height:87px;font-size:0;text-indent:-9999px;background:url(./ic_scroll.png);-webkit-animation:bounce2 2s ease infinite;animation:bounce2 2s ease infinite;z-index:9;opacity:1}

.btn_scroll.hide{transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;opacity:0}


/** effect **/

@-webkit-keyframes round{

100%{transform:rotate(360deg)}

}


@keyframes round{

100%{transform:rotate(360deg)}

}


@-webkit-keyframes bounce{

0%   {top:-19px;}

    100% {top:-45px;}

}


@keyframes bounce{

0%   {top:-19px;}

    100% {top:-45px;}

}

@-webkit-keyframes bounce2{

0% {transform:translateY(0)}

20% {transform:translateY(4px)}

40% {transform:translateY(0)}

60% {transform:translateY(6px)}

100% {transform:translateY(0)}

}


@keyframes bounce2{

0% {transform:translateY(0)}

20% {transform:translateY(4px)}

40% {transform:translateY(0)}

60% {transform:translateY(6px)}

100% {transform:translateY(0)}

}


/** 1280px 시작 **/

@media screen and (max-width:1280px){

.btn_scroll{top:calc(50% + 200px);}

}

/** 1024px 시작 **/

@media (max-width:1024px){

.btn_scroll{display:none;}

}

</style>

 </head>

 <body>

  <span class="btn_scroll">SCROLL DOWN</span>

 </body>

</html>


8a282917267cf3d352a67a8b99487947_1622992013_21.png
 

댓글목록

등록된 댓글이 없습니다.

전체 72
게시물 검색
CSS 목록
번호 제목 글쓴이 조회 날짜
72 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 332 07-31
71 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 525 04-09
70 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 852 09-01
69 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1642 04-24
68 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2791 04-24
67 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1184 03-28
66 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2505 03-26
65 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1182 03-26
64 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1187 03-25
63 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1219 03-18
62 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7597 11-28
61 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1639 09-20
60 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1803 08-23
열람중 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2085 06-07
58 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2530 05-20
57 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2346 04-08
56 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2755 02-03
55 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2335 12-19
54 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2465 11-02
53 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2537 10-25