Down 스크롤 애니메이션 소스
페이지 정보
작성자
운영자
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 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>
댓글목록
등록된 댓글이 없습니다.