Maison >interface Web >tutoriel CSS >CSS3 réalise l'effet d'ouverture dynamique de la porte (exemple de code)
CSS3 réalise l'effet d'ouverture dynamique de la porte (exemple de code)
- 青灯夜游original
- 2018-09-21 14:47:243453parcourir
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 :
<div class="door">
<div class="door-l"></div>
<div class="door-r"></div>
</div>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;
}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;
}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;
}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);
}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>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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn