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:033437parcourir

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!

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

Article précédent：Comment utiliser les propriétés d'animation CSS3Article suivant：Comment utiliser les propriétés d'animation CSS3

Articles Liés

Voir plus