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:033456Durchsuche
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!