Maison > Article > interface Web > Comment créer l'effet de fermer la porte et d'ouvrir la porte en CSS3
Comment créer l'effet de fermer la porte et d'ouvrir la porte en CSS3
- php中世界最好的语言original
- 2017-11-24 10:42:033388parcourir
Aujourd'hui, je vais vous apporter un exemple de code. Comment utiliser CSS3 pour créer l'effet de fermeture et d'ouverture de la porte. Les attributs nécessaires sont border-width, border-. style, etc., nous jetons un coup d'oeil.
border-width : La largeur de la bordure fine
moyenne par défaut
épaisse
Peu utilisée
Valeur px
border-style:none Pas de bordure = caché (sauf pour les tableaux, utilisé pour résoudre les conflits de bordure de tableau)
type de ligne continue
pointillé pointillé
pointillé ligne pointillée
Double ligne double
couleur de la bordure : bordure : 1px solide #000;
bordure-haut : 1px solide #000;bordure supérieure
border-top-width
border-top-style
border-top-color
border-right :
border-bottom :
border-left :
nouveaux attributs css3
border-image : utiliser des images pour remplir la bordure
border-image-source : La source et le chemin de l'image
border-image-slice : Comment diviser l'image
utiliser utiliser utiliser utiliser utiliser utiliser grâce à l'utilisation de l'utilisation à travers à travers ' s' ‐ ‐ ‐‐ ‐‐‐‐‐ image-width: 🎜>
Les codes d'effet sont les suivants. Les amis intéressés peuvent le faire manuellement. Pour des informations plus intéressantes, veuillez faire attention aux autres. articles connexes sur le site php chinois !
Lecture connexe :
Comment utiliser la marge 0 automatique en HTML<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
#box{
width: 300px;
height: 400px;
background: url(img/05.jpg);
background-size:cover;
margin: 150px auto;
position: relative;
overflow: hidden;
}
.left{width: 100%;
height: 100%;
background: rgba(122,0,0,0.5);
position: absolute;
top: 0;
left: -100%;
transition: all 2s;
}
.right{
width: 100%;
height: 100%;
background: rgba(0,0,135,0.5);
position: absolute;
top: 0;
left: 100%;
transition: all 4s;
}
#box:hover .left{
left:-50%
}
#box:hover .right{
left:50%
}
</style>
</head>
<body>
<div id="box">
<div></div>
<div></div>
</div>
</body>
</html>À quoi devez-vous faire attention lorsque vous centrez un div en HTML
Comment utiliser les commentaires if en html
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!