다음 애니메이션 버튼 만들기
페이지 정보
작성자
오원장
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 3,165회
작성일 18-08-13 22:48
본문
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>애니메이션 버튼</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0}
fieldset,img{border:0 none}
dl,ul,ol,menu,li{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
input,select,textarea,button{vertical-align:middle}
input::-ms-clear{display:none}
button{border:0 none;border-radius:0;background-color:transparent;cursor:pointer}
button::-moz-focus-inner{padding:0;border:0}
body{min-width:980px;background:#fff}
body,th,td,input,select,textarea,button{font-size:14px;line-height:1.5;font-family:AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;color:#333;letter-spacing:-0.05em}
a{color:#333;text-decoration:none}
a:active,a:hover{text-decoration:underline}
a:hover{color:#1e88e5}
a:active{background-color:transparent}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
.os_mac strong{font-weight:normal;font-family:AppleSDGothicNeo-Regular,sans-serif}
html,body{height:100%}
html{overflow-y:scroll}
.direct_link{overflow:hidden;position:relative;height:50px;padding-left:55px;margin-bottom:24px}
.direct_link .tit_direct{position:absolute;top:0;left:0;font-weight:bold;font-size:13px;line-height:20px;color:#000;letter-spacing:-1px}
.os_mac .direct_link .tit_direct{letter-spacing:-0.05em}
.direct_link .item_bundle{float:left;margin-right:4px}
.direct_link .item_bundle .link_txt{display:block;padding:0 11px;font-size:13px;line-height:20px;color:#808080;letter-spacing:-1px}
.os_mac .direct_link .item_bundle .link_txt{letter-spacing:-0.05em}
.direct_link .btn_fold{float:left;width:26px;height:26px;margin-top:2px;border:1px solid #a4a4a4;border-radius:20px}
.os_mac .direct_link .btn_fold{margin-top:0}
.direct_link .btn_fold:hover{border-color:#232323}
.direct_link .btn_fold .ico_Rbutton{display:block;width:8px;height:10px;margin:0 auto;background-position:-48px -40px}
.direct_link .btn_fold:hover .ico_Rbutton{-webkit-animation:arrRight .7s;animation:arrRight .7s}
@-webkit-keyframes arrRight{0%,50%,100%{-webkit-transform:translateY(0)}
25%,75%{-webkit-transform:translateX(3px)}
}
@keyframes arrRight{0%,50%,100%{transform:translateX(0)}
25%,75%{transform:translateX(3px)}
}
.ico_Rbutton{display:inline-block;overflow:hidden;font-size:0;line-height:0;background:url(http://t1.daumcdn.net/media/news/news2016/ico_news_180413.png) 0 0 no-repeat;vertical-align:top;text-indent:-9999px;background-size:300px 360px}
.direct_link .btn_fold .ico_Lbutton{display:block;width:8px;height:10px;margin:0 auto;background-position:-40px -40px}
.direct_link .btn_fold:hover .ico_Lbutton{-webkit-animation:arrRight .7s;animation:arrRight .7s}
@-webkit-keyframes arrRight{0%,50%,100%{-webkit-transform:translateY(0)}
25%,75%{-webkit-transform:translateX(3px)}
}
@keyframes arrRight{0%,50%,100%{transform:translateX(0)}
25%,75%{transform:translateX(3px)}
}
.ico_Lbutton{display:inline-block;overflow:hidden;font-size:0;line-height:0;background:url(http://t1.daumcdn.net/media/news/news2016/ico_news_180413.png) 0 0 no-repeat;vertical-align:top;text-indent:-9999px;background-size:300px 360px}
</style>
</head>
<body>
<div class="direct_link #direct"> <!-- btn_fold 눌러서 펼쳐지면 direct_open 클래스 추가 -->
<h2 class="tit_direct">바로가기</h2>
<div class="item_bundle">
<a href="/" class="link_txt #direct_newshome">뉴스홈</a>
</div>
<div class="item_bundle">
<a href="/issue/" class="link_txt #direct_issue">이슈</a>
</div>
<div class="item_bundle">
<a href="/lab/" class="link_txt #direct_lab">미디어랩</a>
</div>
<div class="item_bundle">
<a href="/cp/" class="link_txt #direct_media">언론사별 뉴스</a>
</div>
<div class="item_bundle">
<a href="/newsbox/" class="link_txt #direct_history">배열이력</a>
</div>
<div class="item_bundle">
<a href="/breakingnews/" class="link_txt #direct_all">전체뉴스</a>
</div>
<button type="button" class="btn_fold" style="outline: 0px;"><span class="ico_Lbutton">바로가기 링크 더보기/접기</span></button>
<button type="button" class="btn_fold" style="outline: 0px;"><span class="ico_Rbutton">바로가기 링크 더보기/접기</span></button>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.