CSS3는 문을 동적으로 여는 효과를 실현합니다(코드 예).
- 青灯夜游원래의
- 2018-09-21 14:47:243422검색
이 장에서는 문 효과를 동적으로 여는 CSS3를 소개합니다(코드 예). 특정 참고값이 있습니다. 도움이 필요한 친구에게 도움이 되길 바랍니다.
먼저 렌더링을 살펴보세요.
동적으로 문을 여는 효과는 주로 3D 회전 및 위치 지정을 사용합니다. 기술. 구체적인 단계는 다음과 같습니다.
1 먼저 페이지 본문에 매우 간단한 세 개의 div 태그를 추가합니다.
<div class="door">
<div class="door-l"></div>
<div class="door-r"></div>
</div>2 기본 속성, 배경, 시야 거리 및 상대 위치(하위 상자)를 외부 상자에 추가합니다. (.door) 절대 위치 지정이 필요하므로 상위 상자에 상대 위치 지정을 추가하는 것이 가장 좋습니다.
.door {
width: 450px;
height: 450px;
border: 1px solid #000000;
margin: 100px auto;
background: url(Images/men.png) no-repeat;
background-size: 100% 100%;
position: relative;
perspective: 1000px;
}3. 왼쪽 및 오른쪽 문에 대한 관련 속성을 설정합니다. 왼쪽 상자의 관련 속성은 다음과 같습니다. 오른쪽 상자는 오른쪽 거리에 대한 위치를 0으로 변경하고 회전축을 오른쪽으로 변경하기만 하면 됩니다.
.door-l {
width: 50%;
height: 100%;
background-color: brown;
position: absolute;
top: 0;
transition: all 0.5s;
left: 0;
border-right: 1px solid #000000;
transform-origin: left;
}4. 문에 작은 고리를 추가하세요. 여기에는 이전에 의사 클래스를 사용하여 추가되었습니다.
(1) 크기와 테두리를 설정합니다.
(2) 테두리 반경을 50%로 설정하여 원형으로 만듭니다.
(3) 위치는 수직 중앙에 위치하고 내부에서 일정 거리를 유지하도록 설정합니다.
.door-l::before {
content: "";
border: 1px solid #000000;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
border-radius: 50%;
transform: translateY(-50%);
right: 5px;
}5. 마지막으로 회전 각도를 설정했습니다. 여기서는 120도를 설정했습니다(도의 양수와 음수는 회전 방향을 나타냄).
.door:hover .door-l {
transform: rotateY(-120deg);
}전체 코드는 참조용으로 아래에 제공됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态打开大门</title>
<style>
.door {
width: 450px;
height: 450px;
border: 1px solid #000000;
margin: 100px auto;
background: url(Images/men.png) no-repeat;
background-size: 100% 100%;
position: relative;
perspective: 1000px;
}
.door-l,.door-r {
width: 50%;
height: 100%;
background-color: brown;
position: absolute;
top: 0;
transition: all 0.5s;
}
.door-l {
left: 0;
border-right: 1px solid #000000;
transform-origin: left;
}
.door-r {
right: 0;
border-left: 1px solid #000000;
transform-origin: right;
}
.door-l::before, .door-r::before {
content: "";
border: 1px solid #000000;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
border-radius: 50%;
transform: translateY(-50%);
}
.door-l::before {
right: 5px;
}
.door-r::before {
left: 5px;
}
.door:hover .door-l {
transform: rotateY(-120deg);
}
.door:hover .door-r {
transform: rotateY(120deg);
}
</style>
</head>
<body>
<div class="door">
<div class="door-l"></div>
<div class="door-r"></div>
</div>
</body>
</html>위에 제공된 렌더링은 정적입니다. 위 코드를 직접 컴파일하여 효과를 확인할 수 있습니다. 도움이 되길 바랍니다
위 내용은 CSS3는 문을 동적으로 여는 효과를 실현합니다(코드 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!