RadarURL

logo

  • 홈으로
  • 로그인
  • 회원가입
  • 화면축소
  • 화면확대
2021년 06월 25일
  • 포토누리
  • 제작의뢰
  • 포트폴리오
백반증 수술 sst전층피부이식술
로그인
조회 수 77 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print
Extra Form
.feature-box {overflow: hidden;position: relative;text-align: center; cursor: pointer}
.feature-box .content {padding: 35px 15px;}
.feature-box:before, .feature-box .content:before, .feature-box:after, .feature-box .content:after{display: inline-block; position:absolute; content:""; background-color:#ff3366; z-index: 1}
.feature-box:before, .feature-box .content:before {right:0; top:0; transition-duration:0.5s; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -ms-transition-duration:0.5s; -o-transition-duration:0.5s;}
.feature-box:after, .feature-box .content:after {left:0; bottom:0; transition-duration:0.5s; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -ms-transition-duration:0.5s; -o-transition-duration:0.5s;}
.feature-box:hover:before, .feature-box:hover:after{transform:scaleY(1); transition-duration:0.5s; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -ms-transition-duration:0.5s; -o-transition-duration:0.5s;}
.feature-box:before {transform-origin: right top 0; -webkit-transform-origin: right top 0; -moz-transform-origin: right top 0; -ms-transform-origin: right top 0; -o-transform-origin: right top 0;}
.feature-box:after {transform-origin: left bottom 0; -webkit-transform-origin: left bottom 0; -moz-transform-origin: left bottom 0; -ms-transform-origin: left bottom 0; -o-transform-origin: left bottom 0;}
.feature-box .content:before {transform-origin: right top 0; -webkit-transform-origin: right top 0; -moz-transform-origin: right top 0; -ms-transform-origin: right top 0; -o-transform-origin: right top 0;}
.feature-box .content:after {transform-origin: top left 0; -webkit-transform-origin: top left 0; -moz-transform-origin: top left 0; -ms-transform-origin: top left 0; -o-transform-origin: top left 0;}
.feature-box:before, .feature-box:after{height:100%; width:3px; transform:scaleY(0);-webkit-transform:scaleY(0); -moz-transform:scaleY(0); -ms-transform:scaleY(0); -o-transform:scaleY(0); transition-duration:0.5s; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -ms-transition-duration:0.5s; -o-transition-duration:0.5s;}
.feature-box:hover .content:before, .feature-box:hover .content:after {transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); -ms-transform:scaleX(1); -o-transform:scaleX(1); transition-duration:0.5s; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -ms-transition-duration:0.5s; -o-transition-duration:0.5s;}
.feature-box .content:before, .feature-box .content:after {width:100%; height:3px; transform:scaleX(0); -webkit-transform:scaleX(0); -moz-transform:scaleX(0); -ms-transform:scaleX(0); -o-transform:scaleX(0); transition-duration:0.5s; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -ms-transition-duration:0.5s; -o-transition-duration:0.5s;}


.feature-box 클래스를 이용하면 된다. 

?

List of Articles
번호 분류 제목 조회 수 날짜
공지 css 관련 참고 사이트를 소개 합니다. 7052 2009.03.01
공지 [작성중] CSS강좌 목차 1 13483 2009.05.21
68 강좌 ::before / ::after 2 2021.06.16
67 content관련 속성 2 2021.06.14
66 background size 관련 팁 75 2020.12.09
65 box-sizing: border-box 68 2020.09.04
64 select box readonly 적용시키기 94 2020.08.26
» 마우스 오버시 라인형태로 선택처리 77 2020.04.28
62 강좌 box-shadow 6 2020.04.21
61 강좌 flex 2 24 2020.04.19
60 강좌 css, less, sass, scss 6 2020.04.19
59 transition - CSS , trnsform 4 2020.04.17
58 select 박스 CSS 8 2019.05.17
57 css absolute 속성 중앙 정렬 1 8 2018.03.09
56 강좌 placeholder 7 2018.03.05
55 문자개행이 필요할때 - 링크주소등 8 2017.05.17
54 ul li center 정렬 13 2017.03.17
53 div 속성 overflow:hidden 7 2017.02.09
52 강좌 마우스 오버시 효과 10 2016.05.16
51 강좌 transition/ ease-out을 이용한 그래프 만들기 10 2016.05.16
50 강좌 css - 마우스 오버시 배경컬러 변경 32 2016.05.16
49 강좌 input type에 label 표기방법 12 2015.07.14
목록
Board Pagination ‹ Prev 1 2 3 4 Next ›
/ 4

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

  • Designed by jobdahan.net