이 문서의 내용은 마우스가 이미지 위로 지나갈 때 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; }
.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; }
/*图片放大*/ .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 중국어 웹사이트의 기타 관련 기사를 참조하세요!