Comment créer l'effet de fermer la porte et d'ouvrir la porte en CSS3-tutoriel CSS-php.cn

Comment créer l'effet de fermer la porte et d'ouvrir la porte en CSS3

php中世界最好的语言

Libérer： 2017-11-24 10:42:03

original

3470 Les gens l'ont consulté

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>

Copier après la connexion

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