오늘날의 디지털 시대에는 시각적으로 매력적인 대화형 사용자 인터페이스를 만드는 것이 웹 디자인의 중요한 측면이 되었습니다. 현대 웹사이트에서 널리 사용되는 효과 중 하나는 이미지 접기 효과입니다. 이 효과는 웹 사이트에 이미지를 표시하는 독특하고 매력적인 방법을 제공합니다. 이미지 접기 효과의 예술은 현대 디지털 아키텍처의 기본 구성 요소인 HTML 및 CSS를 적용하여 만들 수 있습니다. 이번 포스팅에서는 HTML과 CSS를 사용하여 이미지 접기 결과를 하나씩 작성하는 과정을 안내하겠습니다. 이 글을 읽고 나면 이 효과를 달성하고 웹사이트를 돋보이게 만드는 방법을 확실하게 이해하게 될 것입니다.
변환 속성
CSS의 변환 속성은 HTML 요소의 모양, 위치 또는 크기를 변경하는 데 사용됩니다. 이를 통해 소프트웨어 엔지니어는 구성 요소의 배열, 회전, 비틀림, 크기 및 기타 광학 특성을 변경할 수 있습니다. 변환은 전송, 회전, 기울기, 진폭과 같은 2D 및 3D 변형 작업을 통해 수행됩니다. 전환 속성은 모든 최신 웹 브라우저에서 원활하게 작동하며 사용자 참여 및 상호 작용을 유발하는 동적 및 애니메이션 시각적 구성 요소를 생성하는 데 사용할 수 있습니다. 변환된 구성 요소는 고유한 크기, 윤곽선 및 위치를 유지하며 다른 인접 구성 요소는 변환된 구성 요소에 맞춰 조정됩니다. 이는 페이지의 다른 요소 레이아웃에 영향을 주지 않고 웹 페이지의 요소로 작업할 수 있는 좋은 방법입니다.
문법
으아악
Function은 다음 중 하나일 수 있습니다&miinus;
translate() - x 및 y축을 따라 요소를 이동합니다.
rotate() - 원점을 중심으로 요소를 회전합니다.
scale() - 요소의 크기를 늘리거나 줄입니다.
skew() - x 또는 y축을 따라 요소를 비틀습니다.
matrix() - 여러 변환을 단일 변환으로 결합합니다.
값은 사용 중인 특정 기능에 따라 다릅니다. 예를 들어, Translate() 함수를 적용하기로 선택한 경우 이 값은 Translate(x, y)로 표현될 수 있습니다. 여기서 x와 y의 숫자 값은 요소를 해당 요소를 이동하는 데 필요한 픽셀 수를 나타냅니다. 방향. 가로축과 세로축.
:N번째 하위 선택기
:nth-child라는 CSS 선택기는 상위 요소 중 순서 위치를 기준으로 요소를 선택하는 데 사용됩니다. 이를 통해 오름차순 구성 요소에 포함된 특정 청소년 구성 요소를 정확히 찾아내고 해당 청소년 구성 요소에 스타일 속성을 첨부할 수 있습니다. :nth-child 식별자는 알고리즘을 사용하여 선택해야 할 하위 구성 요소를 결정합니다. 예를 들어 :nth-child(2)를 사용하여 상위 요소의 후속 하위 요소를 선택하거나 :nth-child(even)를 사용하여 짝수 슬롯을 차지하는 모든 후속 요소를 선택할 수 있습니다.
문법
으아악
여기서 a와 b는 정수이고, n은 양의 정수(1부터 시작)입니다.
방법
이미지에 이미지 접기 효과를 만들려면 먼저 이미지를 여러 부분으로 나누어야 합니다.
요소를 사용하여 이미지의 다양한 부분을 저장합니다. 이제 다른 섹션을 선택하려면
태그를 선택하고 위에서 설명한 :nth-child 선택기를 사용합니다. 마지막으로 종이접기 효과를 만들기 위해 어떤 방식으로든 각 이미지를 변형해 보겠습니다.
다음 코드는 본질적으로 시각적으로 매력적인 대화형 이미지 접기 효과를 만드는 데 사용할 수 있는 HTML 및 CSS 프로그램입니다. 실행 시 시각적으로 매력적이고 역동적인 방식으로 축소되는 것처럼 보이는 이미지를 렌더링하는 다양한 선언 및 지시문을 통해 작동합니다. HTML 코드는 doctype 선언으로 시작하여 HTML 문서 열기, 효과 제목이 포함된 헤더, 스타일 태그 선언으로 이어집니다. 다음은 제목과 하위 요소의 정렬되지 않은 목록을 포함하는 body 태그입니다. 그런 다음 CSS를 사용하여 목록의 스타일을 지정하여 각각 축소 효과가 있는 4개의 하위 요소로 구성된 컨테이너를 포함하는 효과를 만듭니다.
CSS 코드에는 순서가 지정되지 않은 목록의 스타일을 지정하고 컨테이너의 여백, 안쪽 여백 및 위치 지정과 같은 세부 정보를 지정하는 일련의 지침이 필요합니다. 또한 접기 효과의 배경 이미지로 색상 그라데이션을 적용합니다. 그런 다음 컨테이너의 크기, 위치 및 표시 속성을 지정합니다. 스타일에는 애니메이션의 전반적인 효과에 기여하는 전환 및 상자 그림자의 사양도 포함됩니다.
또한 사용자가 컨테이너 위로 마우스를 가져가면 SkewY() 변환 속성을 적용하여 컨테이너의 하위 요소를 대체하여 반으로 접힌 이미지의 모양을 시뮬레이션하는 동적 효과를 생성합니다. nth-child() 특성을 사용하면 SkewY() 변환을 적용할 대체 하위 요소를 선택하는 데 도움이 됩니다. 요약하면 nth-child() 속성을 추가로 사용하여 각 하위 구성 요소의 배경 포즈를 지정하면 접는 과정에서 이미지의 각 조각이 정확하게 구성되도록 할 수 있습니다.
예
이 예에서 살펴볼 전체 코드는 다음과 같습니다. -
<!DOCTYPE html>
<html>
<head>
<title>How to create Image Folding Effect using HTML and CSS?</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
margin: 10;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 480px;
height: 270px;
display: flex;
}
.fold {
list-style: none;
width: 25%;
background-image: linear-gradient(yellow,orange,red);;
background-size: cover;
height: 100%;
transition: 0.5s;
}
.container:hover .fold:nth-child(odd) {
transform: skewY(15deg);
box-shadow: inset 20px 0 50px rgba(0,0,0, .5);
}
.container:hover .fold:nth-child(even) {
transform: skewY(-15deg);
box-shadow: inset 20px 0 50px rgba(0,0,0, .5);
}
.container .fold:nth-child(1) {
background-position: 0;
}
.container .fold:nth-child(2) {
background-position: -120px;
}
.container .fold:nth-child(3) {
background-position: -240px;
}
.container .fold:nth-child(4) {
background-position: -360px;
}
</style>
</head>
<body>
<h4>How to create Image Folding Effect using HTML and CSS?</h4>
<ul class="container">
<li class="fold"></li>
<li class="fold"></li>
<li class="fold"></li>
<li class="fold"></li>
</ul>
</body>
</html>
로그인 후 복사
结论
最终，折叠图像印象构成了一个简单但有效的工具，可以将交互性和视觉吸引力融入您的网站。通过遵守本说明中阐述的规定程序，人们可以轻松地使用 HTML 和 CSS 产生这种印象。无论您是新手还是熟练的程序员，本文都为您提供了在网站上实现图像折叠效果所需的知识和材料。通过一点创造力和实验，您可以自定义效果以满足您的特定设计需求并增强访问者的用户体验。所以，今天就开始创建您自己的图像折叠效果吧！
위 내용은 HTML과 CSS를 사용하여 이미지 접기 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
