So erzeugen Sie in CSS3 den Effekt, die Tür zu schließen und zu öffnen-CSS-Tutorial-php.cn

So erzeugen Sie in CSS3 den Effekt, die Tür zu schließen und zu öffnen

php中世界最好的语言

Freigeben： 2017-11-24 10:42:03

Original

3386 Leute haben es durchsucht

Heute bringe ich Ihnen einen Beispielcode, wie Sie mit CSS3 den Effekt des Schließens und Öffnens der Tür erzeugen. Die benötigten Attribute sind border-width, border-. Stil usw., wir Werfen wir einen Blick darauf.

Rahmenbreite: Die Breite des Randes dünn

mittel Standard

dick

Nicht häufig verwendet

Wert px

border-style:none Kein Rand = ausgeblendet (außer bei Tabellen, wird zur Lösung von Tabellenrandkonflikten verwendet)

durchgezogener Linientyp

gepunktet gepunktet

gestrichelt gepunktete Linie

Doppelte Doppellinie

border-color : border: 1px solid #000;

border-top: 1px solid #000;top border

border-top-width

border-top-style

border-top-color

border-right:

border-bottom:

border-left:

neue CSS3-Attribute

border-image: Verwenden Sie Bilder, um den Rand zu füllen

border-image-source: Die Quelle und der Pfad des Bildes

border-image-slice: So teilen Sie das Bild

verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, verwenden, ‐ ‐ ‐‐ ‐‐‐‐ Bildwiederholung:

Die Effektcodes sind die oben genannten. Interessierte Freunde können dies manuell tun. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie Margin 0 Auto in 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>

Nach dem Login kopieren

Worauf sollten Sie beim Zentrieren von div in HTML achten

So verwenden Sie Kommentare in HTML

Das obige ist der detaillierte Inhalt vonSo erzeugen Sie in CSS3 den Effekt, die Tür zu schließen und zu öffnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!