CSS3 realisiert den Effekt des dynamischen Öffnens der Tür (Codebeispiel)-CSS-Tutorial-php.cn

CSS3 realisiert den Effekt des dynamischen Öffnens der Tür (Codebeispiel)

青灯夜游

Freigeben： 2018-09-21 14:47:24

Original

3426 Leute haben es durchsucht

In diesem Kapitel wird CSS3 zum dynamischen Öffnen der Tür vorgestellt (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Schauen Sie sich zuerst die Darstellungen an:

CSS3 realisiert den Effekt des dynamischen Öffnens der Tür (Codebeispiel)

Tür dynamisch öffnen Der Effekt nutzt hauptsächlich 3D-Rotations- und Positionierungstechnologie. Die spezifischen Schritte sind wie folgt:

1. Fügen Sie zunächst drei sehr einfache div-Tags zum Hauptteil der Seite hinzu:

<div class="door">
     <div class="door-l"></div>
     <div class="door-r"></div>
</div>

Nach dem Login kopieren

2 Positionierung (die untergeordnete Box muss eine absolute Positionierung verwenden, daher ist es am besten, der übergeordneten Box eine relative Positionierung hinzuzufügen).

.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;
        }

Nach dem Login kopieren

3. Legen Sie die zugehörigen Attribute für die linke und rechte Tür fest. Hier sind die zugehörigen Attribute des linken Felds. Das rechte Feld muss lediglich die Positionierung in den rechten Abstand auf 0 und die Rotationsachse nach rechts ändern.

.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;
        }

Nach dem Login kopieren

4. Fügen Sie den kleinen Ring an der Tür hinzu, hier wird er zuvor mit der Pseudoklasse hinzugefügt.

　 (1) Legen Sie die Größe und den Rand fest

　 (2) Stellen Sie den Randradius auf 50 % ein, um ihn kreisförmig zu machen.

(3) Stellen Sie die Positionierung so ein, dass sie vertikal zentriert ist und einen gewissen Abstand von der Innenseite hat.

.door-l::before {
            content: "";
            border: 1px solid #000000;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            border-radius: 50%;
            transform: translateY(-50%);
            right: 5px;
        }

Nach dem Login kopieren

Abschließend stellen Sie den Grad der Drehung ein, den ich hier auf 120 Grad eingestellt habe (beachten Sie, dass das Positive und das Negative des Grades die Drehrichtung darstellen)

.door:hover .door-l {
            transform: rotateY(-120deg);
        }

Nach dem Login kopieren

Der vollständige Code lautet unten als Referenz angegeben.

<!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>

Nach dem Login kopieren

Die oben angegebenen Renderings sind statisch. Sie können den obigen Code selbst kompilieren, um den Effekt zu sehen. Ich hoffe, es hilft dir

Das obige ist der detaillierte Inhalt vonCSS3 realisiert den Effekt des dynamischen Öffnens der Tür (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!