Heim > Artikel > Web-Frontend > So erzeugen Sie in CSS3 den Effekt, die Tür zu schließen und zu öffnen

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

php中世界最好的语言Original: 2017-11-24 10:42:033451Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie CSS3-AnimationseigenschaftenNächster Artikel：So verwenden Sie CSS3-Animationseigenschaften

In Verbindung stehende Artikel

Mehr sehen