박스 테두리를 따라서 흐르는 효과 > 정보공유

본문 바로가기

쇼핑몰 검색

위토즈소프트 로그인

회원가입 회원가입  아이디/비밀번호찾기 아이디/비밀번호찾기

정보공유 목록

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

페이지 정보

작성자 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일19-02-08 22:03 조회291 회 댓글0 건

본문

 

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 338건 1 페이지
정보공유 목록
번호 제목 글쓴이 날짜 조회
338 그누보드팁 게시물에 등록된 이미지파일 썸네일 생성 하고 워터마크 처리 하기 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-23 14
337 API 스마트 에디터 기본 편집모드 변경하는 방법 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-11 45
336 기타 htaccess 를 이용한 도메인 처리 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-09 43
335 기타 CSV 파일을 가져오기 할때 한칸씩 밀리는 현상 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-03 63
334 SQL IN () 은 INNER JOIN 혹은 EXISTS로 사용하자 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-21 94
333 SQL 중복된 데이터 정리하기 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-18 112
332 API 네이버 지도 Open API 종료 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-06 225
열람중 퍼블리싱 박스 테두리를 따라서 흐르는 효과 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-08 292
330 그누보드팁 그누보드 및 영카트 사이트 이전 방법 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-26 406
329 JQUERY 복잡한 rowspan 처리 쉽게 처리하는 방법 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-22 352
328 씨아이보드팁 한사이트에 2개이상의 도메인을 사용할경우 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-10 401
327 퍼블리싱 이미지 중앙 가운데 정렬 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-20 575
326 API 네이버 로그인 API 키 받기 (WEB 서비스 예제) 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-17 547
325 PHP 엑셀파일에서 문자를 복사한뒤 붙여넣기 할경우 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-06 677
324 API 페이팔 api 결제가 안될경우 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-26 575
게시물 검색