이 문서의 내용은 마우스가 이미지 위로 지나갈 때 CSS를 사용하여 이미지 크기 조정 효과(느린 변경, 전환 효과 포함, 크기 조정 프로세스에 애니메이션 전환 포함)를 얻는 방법에 관한 것입니다. 주로 사용되는 , css3 전환 속성, 다음과 같은 구현 효과와 구체적인 구현 방법이 여러분에게 도움이 되길 바랍니다.
먼저 효과 미리보기를 살펴보겠습니다
<div class="content"> <ul> <li><img class="amplify" src="img/1.jpg" title="放大"/ alt="CSS는 마우스가 이미지 위로 지나갈 때 이미지 크기를 조정하는 효과를 얻습니다(코드 예)." ></li> <li><img class="narrow" src="img/1.jpg" title="缩小"/ alt="CSS는 마우스가 이미지 위로 지나갈 때 이미지 크기를 조정하는 효과를 얻습니다(코드 예)." ></li> </ul> </div>컨테이너 크기 정의, 오버플로: 숨김; 하위 컨테이너가 상위 컨테이너를 초과합니다.
* { margin: 0; padding: 0; font-family: "微软雅黑"; } ul li{ list-style: none; } .content{ width: 310px; height: 420px; padding: 5px; border: 1px solid #000; margin: 10px auto; } /*定义容器的大小*/ .content ul li{ display: block; width: 300px; margin: 0 auto; margin: 5px; overflow: hidden;/*隐藏溢出*/ border: 1px solid #000; }부분은 이미지 변환의 원래 크기 조정을 정의합니다: scale(1),. 사진을 확대할 때의 전환 효과: 전환: 모두 1초 완화(점진적으로 느려짐)는 1초 이내에 변경됩니다. 완화(기본값) 외에도 전환 속성에는 선형(균일한 속도)이 포함됩니다. ,이지 인:(가속),이지 아웃:(감속),이지 인-아웃:(가속했다가 감속)
.content ul li img{ display: block; border: 0; width: 100%; transform: scale(1); transition: all 1s ease 0s; -webkit-transform: scale(1); -webkit-transform: all 1s ease 0s; }마우스가 그림으로 이동하면 그림의 확대 효과: in의 값 scale()이 1보다 크면 확대되고, scale()의 값이 1보다 작으면 축소됩니다.
/*图片放大*/ .content ul li:hover .amplify{ transform: scale(1.3); transition: all 1s ease 0s; -webkit-transform: scale(1.3); -webkit-transform: all 1s ease 0s; } /*图片缩小*/ .content ul li:hover .narrow{ transform: scale(0.8); transition: all 1s ease 0s; -webkit-transform: scale(0.8); -webkit-transform: all 1s ease 0s; }
위 내용은 CSS는 마우스가 이미지 위로 지나갈 때 이미지 크기를 조정하는 효과를 얻습니다(코드 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!