CSS 전환을 사용하여 중앙에서 Div를 확장하는 방법은 무엇입니까?

CSS를 사용하여 상단 및 왼쪽만 확장하는 대신 중앙에서 Div를 확장하는 방법

div 확장으로 원하는 효과를 얻을 수 있습니다. 정확한 접근 방식은 원하는 컨텍스트와 상호 작용에 따라 달라진다는 점에 유의하는 것이 중요합니다. 사용할 수 있는 옵션은 다음과 같습니다.

여백의 전환 속성을 활용하면 div가 중앙에서 확장되는 효과를 만들 수 있습니다. 처음에 div 주위에 큰 여백을 설정하고 사용자가 그 위로 마우스를 가져가면 div가 확장되는 너비와 높이의 절반만큼 여백을 줄입니다.

예를 들어 초기 너비를 가진 div가 있다고 가정합니다. 높이는 10px이고 마우스를 올리면 100px로 확장되기를 원합니다. 다음 CSS를 설정합니다.

<code class="css">#square {
    width: 10px;
    height: 10px;
    margin: 100px;
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    width: 100px;
    height: 100px;
    margin: 55px;
}</code>

이렇게 하면 div가 중앙에서 확장되는 효과가 생성됩니다. div를 플로팅하면 전환 중에 약간의 "흔들림"이 발생할 수 있으므로 플로팅 없이 제자리에 유지하는 것이 좋습니다.

위 내용은 CSS 전환을 사용하여 중앙에서 Div를 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!