위토즈 - 개발자프로그램판매공간

정보공유

[퍼블리싱] 박스 테두리를 따라서 흐르는 효과

 

9734a7c78cd9f78126c0990be6d6ad3a_1549631307_5374.gif
 

 

 

<style>

.square{position:relative;padding:10px;background:#000;color:#fff;text-align:center}

.square i{position:absolute;text-indent:-9999px;background:rgba(255,255,255,.7)}

.square i.line1{width:2px;height:100%;bottom:0;left:0;animation:line1 5s infinite;-webkit-animation:line1 5s infinite;-moz-animation:line1 5s infinite}

.square i.line2{width:100%;height:2px;top:0;left:0;animation:line2 5s infinite;-webkit-animation:line2 5s infinite;-moz-animation:line2 5s infinite}

.square i.line3{width:2px;height:100%;top:0;right:0;animation:line3 5s infinite;-webkit-animation:line3 5s infinite;-moz-animation:line3 5s infinite}

.square i.line4{width:100%;height:2px;bottom:0;right:0;animation:line4 5s infinite;-webkit-animation:line4 5s infinite;-moz-animation:line4 5s infinite}

 

@keyframes line1 {

0% { height:0; }

25%, 100% { height:100%; }

}

@-webkit-keyframes line1 {

0% { height:0; }

25%, 100% { height:100%; }

}

@-moz-keyframes line1 {

0% { height:0; }

25%, 100% { height:100%; }

}

@keyframes line2 {

0%, 25% { width:0; }

50%, 100% { width:100%; }

}

@-webkit-keyframes line2 {

0%, 25% { width:0; }

50%, 100% { width:100%; }

}

@-moz-keyframes line2 {

0%, 25% { width:0; }

50%, 100% { width:100%; }

}

@keyframes line3 {

0%, 50% { height:0; }

75%, 100% { height:100%; }

}

@-webkit-keyframes line3 {

0%, 50% { height:0; }

75%, 100% { height:100%; }

}

@-moz-keyframes line3 {

0%, 50% { height:0; }

75%, 100% { height:100%; }

}

@keyframes line4 {

0%, 75% { width:0; }

100% { width:100%; }

}

@-webkit-keyframes line4 {

0%, 75% { width:0; }

100% { width:100%; }

}

@-moz-keyframes line4 {

0%, 75% { width:0; }

100% { width:100%; }

}

</style>

 

<a href="#none" class="square">

    BUTTON

    <i class="line1">1</i>

    <i class="line2">2</i>

    <i class="line3">3</i>

    <i class="line4">4</i>

</a>

 

정보공유
Total 45건 2 페이지
번호 제목 글쓴이 날짜 조회
30 부트스트랩 form control input box 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-17 17806
열람중 박스 테두리를 따라서 흐르는 효과 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-08 20919
28 이미지 중앙 가운데 정렬 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-20 30421
27 유튜브 동영상 반응형 처리 (리사이징) 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-20 22986
26 반응형 테이블 만들기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-01 23704
25 ul li 사용하여 셀타입으로 갤러리를 구성했을때 칸이 비는 현상 방지 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-17 23563
24 이미지 화면 정중앙 가운데 정렬 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-27 40229
23 말줄임 처리 css 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-02 28823
22 html 코드 정리를 90%이상 빠르게 해주는 도구 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-07 40397
21 2단 레이아웃 만들기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-22 28460
20 반응형 테이블 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-15 35230
19 첨부파일 이미지파일만 등록하게 하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-07 31099
18 부트스트랩 슬라이더 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-01 42629
17 부트스트랩 모달창 닫기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-01 33500
16 심플한 테이블 디자인 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 33257