CSS3 réalise l'effet d'ouverture dynamique de la porte (exemple de code)-tutoriel CSS-php.cn

CSS3 réalise l'effet d'ouverture dynamique de la porte (exemple de code)

青灯夜游

Libérer： 2018-09-21 14:47:24

original

3478 Les gens l'ont consulté

Ce chapitre présente CSS3 pour ouvrir dynamiquement la porte (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile

Jetez d'abord un œil aux rendus :

CSS3 réalise leffet douverture dynamique de la porte (exemple de code)

<.>Ouvrir dynamiquement la porte L'effet utilise principalement la technologie de rotation et de positionnement 3D. Les étapes spécifiques sont les suivantes :

1. Tout d'abord, ajoutez trois balises div très simples au corps principal de la page :

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

Copier après la connexion

2. Ajoutez des attributs de base à la zone extérieure ( .door). Arrière-plan, distance de visualisation et positionnement relatif (la boîte enfant doit utiliser un positionnement absolu, il est donc préférable d'ajouter un positionnement relatif à la boîte parent).

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

Copier après la connexion

3. Définissez les attributs associés pour les portes gauche et droite. Voici les attributs associés de la case de gauche. La case de droite n'a qu'à changer le positionnement à la bonne distance à 0 et l'axe de rotation à droite.

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

Copier après la connexion

4. Ajoutez le petit anneau sur la porte, ici il est ajouté en utilisant la pseudo classe d'avant.

　 (1). Définissez la taille et la bordure

　 (2) Réglez le rayon de la bordure à 50 % pour la rendre circulaire.

(3) Réglez le positionnement pour qu'il soit centré verticalement et à une certaine distance de l'intérieur.

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

Copier après la connexion

5. Enfin, réglez le degré de rotation. J'ai réglé ici 120 degrés (notez que les degrés positifs et négatifs représentent le sens de rotation)

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

Copier après la connexion

Le complet. le code est donné ci-dessous pour tout le monde pour référence.

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

Copier après la connexion

Les rendus donnés ci-dessus sont statiques. Vous pouvez compiler le code ci-dessus vous-même pour voir l'effet. J'espère que ça vous aidera

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!