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

정보공유

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

 

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 436건 2 페이지
번호 제목 글쓴이 날짜 조회
421 웹사이트 접속 사용자 인증 걸기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 2093
420 css 가로폭 일정비율로 칸 만들기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-18 2475
419 폼을 생성하고 선택된(필요한) 영역의 값만 전송 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-17 2509
418 부트스트랩 모달창 제어 관련 스크립트. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-29 2866
417 탭으로 나눠지는 슬라이드 쇼 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 3273
416 자바스크립트 소수점 포함 numberformat 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-18 3094
415 Click jacking, Frame sniffing 등과 같은 Frame을 이용한 공격 방어 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-05 3545
414 쿠키 Secure 속성 옵션 추가. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-05 3481
413 쿠키 하이젝킹 방지(cookie hijacking) HttpOnly, 쿠키 HttpOnly 속성 누락. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-05 3562
412 [sprintf 함수] 결과값 처리 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-09 3513
411 SQL 인젝션 막기를 위한 php 코드 수정. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-08 3697
410 php json_encode 옵션 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-09 3815
409 그누보드 clean_xss_tags 함수 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-28 4277
408 인스타그램을 경유해서 쇼핑몰 ISP 결제오류 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-30 4345
407 도메인주소 매칭 확인 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-21 5030