CSS 추가 방법 이미지에 애니메이션 공개-CSS 튜토리얼-php.cn

CSS를 영리하게 사용하여 이미지 호버링을 달성하고 추가 요소없이 애니메이션 효과를 드러냅니다! 이 기사는

 <img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" class="lazy" css alt="CSS 추가 방법 이미지에 애니메이션 공개" > <p>
<code><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" class="lazy" alt="How to Add a CSS Reveal Animation to Your Images ">

核心要点：

仅需<img alt="CSS 추가 방법 이미지에 애니메이션 공개" > 코어 포인트 :

object-fit: cover만이 필요합니다. object-position: right 애니메이션의 핵심은 다음과 같습니다. 이미지에 패딩을 추가 한 다음 호버링 할 때 점차 0으로 줄이면서 배경색을 사용하여 공개되는 이미지의 시각적 효과를 만듭니다. 및
패딩 방향을 조정하면 애니메이션 효과를 확장하고 더 많은 변경 사항을 생성 할 수 있습니다. 속성은 일부 구성에서 다른 효과를 생성 할 수 있지만 이미지의 고유 치수와 일치하려면 CSS 너비와 높이가 필요합니다. object-fit: none

먼저, 이미지 크기를 정의하십시오 : <img alt="CSS 추가 방법 이미지에 애니메이션 공개" > 지금까지 코드는 매우 간단합니다. 단순화를 위해 정사각형 이미지를 사용하지만 모든 크기의 사진을 사용할 수도 있습니다. 명시 적으로 및 를 설정하거나

의 사용에주의를 기울이는 것도 매우 중요합니다. 현재는 영향을 미치지 않지만 다음 단계로 넘어 가서 왜 필요한지 살펴 보겠습니다.

고정 크기가 정의 된 이미지에 패딩을 추가하고 를 사용하면 어떻게됩니까? 시도해 봅시다! Codepen 데모 링크 위의 데모에서 보았 듯이 그림이 압박되었습니다. 왼쪽에 100px 패딩을 추가하여 이미지 (콘텐츠 영역)의 100px 공간 만 남길 것입니다. 이것이 의 효과입니다. MDN이 설명 하듯이 :

는 브라우저에 요소의 너비와 높이에 대해 지정한 값의 경계와 패딩을 고려하도록 지시합니다. 요소의 너비를 100 픽셀로 설정하면 100 픽셀에는 추가 된 테두리 또는 채우기가 포함되어 있으며 내용 상자가 여분의 너비를 흡수하기 위해 줄어 듭니다. box-sizing: border-box 이제 패딩이 너비와 같은 장면을 상상해보십시오. 예, 사진이 사라질 것입니다! 아래 데모에서는 이미지 위로 마우스를 가져와 결과를보십시오. Codepen 데모 링크 border-box 위의 데모에는주의를 기울여야 할 두 가지 요점이 있습니다. 패딩은 애니메이션 할 수 있으며, 시원합니다. 이미지 크기를 정의 할 때 이전에 사용 된 CSS 변수의 중요성도 볼 수 있습니다. 패딩을 정의하기 위해 동일한 변수를 사용 했으므로 동일한 값을 반복 할 필요가 없습니다.

배경색 추가 :
이전 예를 들어 배경을 추가합시다. Codepen 데모 링크 우리는 목표에 더 가까워지기 시작했습니다. 배경은 전체 요소를 논리적으로 다룹니다. 우리는 그림 아래에서 그것을 볼 수 없지만 (투명한 그림을 사용하지 않는 한), 채우기 영역에서 볼 수 있습니다. 우리의 목표는 이미지를 공개하는 것입니다. 패딩을 추가 한 다음 호버링 할 때 0으로 설정하여 현재하고있는 일과 반대입니다. Codepen 데모 링크 이것은 여전히 우리가 원하는 효과가 아니지만 우리는 점점 가까워지고 있습니다! 우리는“가짜”공개 애니메이션을 완벽하게 만들려면 하나의 성분 만 있으면됩니다!

객체-피트와 객체 위치를 추가하십시오 : 누락 된 부분은 이미지가 압박되는 것을 피하는 것입니다. 여기에 마지막 트릭이 있습니다. 우리는 및 여기에는 두 가지 중요한 점이 있습니다 :
"컨텐츠 크기를 교체하여 종횡비를 유지합니다." 이것은 그림이 압박되지 않지만 고유 한 비율을 유지한다는 것을 의미합니다. 우리는 정사각형 그림을 사용하고 있으므로 정사각형을 유지합니다. "요소의 전체 내용 상자를 채우십시오. 이미지는 모든 컨텐츠 영역을 채워야하지만 (약간의 채우기를 추가하여 감소시키는 영역), 내부에 맞지 않으면 자르냅니다.
아래 데모에서 시도해 봅시다. Codepen 데모 링크
봤어? 사진은 더 이상 압박되지 않습니다! 패딩을 추가/제거하는 동안 콘텐츠 영역 내에서 비율을 유지합니다. 좋아, 우리는 그 효과가 초기 프레젠테이션과 다르다고 생각할 수 있습니다. 그림은 이상하게 움직입니다. 좋아요. 그래서 이제 우리는 로 돌아갑니다. 기본값은 이므로 이미지는 항상 컨텐츠 영역의 중앙에 있으며 내부에 맞게 자르 게됩니다. 그렇기 때문에 애니메이션과 함께 움직입니다. 다음에해야 할 일은 예측하기 쉬워야합니다. 사진이 움직이지 않도록 위치를 변경합니다. 왼쪽에서 패딩을 추가하므로 이미지의 위치를 오른쪽으로 고정하려면
를 사용해야합니다. Codepen 데모 링크 object-position 공개 애니메이션이 완료되었습니다! 우리는 그림 위의 오버레이 나 여분의 요소가 필요하지 않습니다. 간단한 배경색과 일부 사진 위치 팁을 사용하여 소량의 간단한 코드로 아름다운 공개 애니메이션을 달성했습니다. 채우기 방향과 center를 조정하여 방향을 쉽게 업데이트 할 수 있습니다. 다음은 4 가지 방향을 포함하는 이전의 첫 데모입니다. Codepen 데모 링크 object-position: right 다음은 우리가 사용하는 CSS입니다 더 많은 애니메이션이 공개되었습니다 :
우리는 같은 아이디어를 사용하여 더 많은 변경 사항을 만들기 위해 트릭을 확장 할 수 있습니다. 한쪽에서 패딩을 추가/제거하는 대신 양쪽 또는 모든면에 패딩을 추가/제거 할 수 있습니다. Codepen 데모 링크
위에서 설명한 코드를 확인하면 이전 코드와 큰 차이가 있음을 알지 못할 것입니다. 우리가 한 모든 일은 동일한 효과의 더 많은 변형을 만들기 위해 다른 충전 구성을 설정하는 것입니다. 첫 번째 및 마지막 예제에서, 우리는 object-position 대신 를 사용하여 트릭을 갖습니다. 이 경우 충전은 내용 면적의 너비와 높이를 0으로 줄이는 반면, 다른 모든 경우에는 높이 나 너비 만 줄입니다. 이 구성에서는 가 작동하지 않지만
는 작업을 수행 할 수 있습니다. MDN 참고 사항 : 교체 콘텐츠는 크기를 조정하지 않습니다.
왜 우리는 항상
를 사용하지 않습니까? 우리는 그것을 사용할 수 있고 작동하지만 작은 단점이 있습니다. 그림의 고유 한 치수가 고려되므로 CSS 너비와 높이를 기술의 고유 치수와 동일하게 만들어야합니다. 반면에 는 그림의 스케일을 유지하고 상자 크기에 맞게 그림을 크기를 조정하므로 그림의 CSS 크기를 안전하게 정의 할 수 있습니다. 이것은 차이를 볼 수 있도록 비교입니다. Codepen 데모 링크
img { --s: 200px; /* 图片大小 */ width: var(--s); height: var(--s); box-sizing: border-box; }
로그인 후 복사
두 경우 모두 애니메이션을 공개하지만 를 사용할 때 이미지는 크기 조정되지 않고 기본 크기 (500x500)를 유지합니다. 비율 만 유지하면 이미지가 상자 크기에 맞게 크기가 커집니다.
object-fit: none 결론 : object-fit: cover 이 작은 CSS 실험을 즐겼기를 바랍니다. 간단한 트릭과 몇 줄의 코드를 사용하여 요소만으로 멋진 공개 애니메이션을 구현했습니다. 또한 동일한 코드 구조를 사용하여 많은 변경을했습니다. 우리는이 기술로 더 많은 일을 할 수 있습니다. 흑백 이미지를 호버링하는 동안 컬러 이미지로 변환하는 마지막 예제를 남겨 드리겠습니다. Codepen 데모 링크
나는 당신이 계속 탐색하고 더 아름다운 애니메이션을 찾도록하겠습니다!

위 내용은 CSS 추가 방법 이미지에 애니메이션 공개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!