> 웹 프론트엔드 > HTML 튜토리얼 > CSS learnning._html/css_WEB-ITnose

CSS learnning._html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다: 2016-06-24 11:23:37
원래의
1058명이 탐색했습니다.

"Whenever this property changes, apply that change slowly."

The property transition: width 2s says “when the width changes, animate it over the course of 2 seconds.”

transition: all 0.5s says “when anything changes, spend 0.5s doing it.”

So if you want to round the corners of a button when it’s hovered?

/* Initial state: border-radius is 0. * When border-radius changes, it'll take 0.3s * instead of happening immediately */button {	border-radius: 0;	transition: border-radius 0.3s;	/* any other styles you need ... */}button:hover {	border-radius: 20px;}
로그인 후 복사

  Here’s the button:

1 .demo-button { transition: border-radius 0.3s; 2 border: 1px solid dodgerblue; background-color: #fff; 3 border-radius: 0; padding: 1em; color: dodgerblue; } 4 .demo-button:hover { border-radius: 20px; }
로그인 후 복사

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿