웹프로그래밍

Global It Leader!!


CSS


 
 

Down 스크롤 애니메이션 소스

페이지 정보

작성자 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 1,786회 작성일 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 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 71 07-31
71 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 218 04-09
70 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 603 09-01
69 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1220 04-24
68 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2162 04-24
67 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 926 03-28
66 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1989 03-26
65 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 920 03-26
64 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 926 03-25
63 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 936 03-18
62 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6194 11-28
61 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1374 09-20
60 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1540 08-23
열람중 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1787 06-07
58 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2171 05-20
57 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2017 04-08
56 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2428 02-03
55 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2065 12-19
54 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2180 11-02
53 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2243 10-25