Heim > Artikel > Web-Frontend > So erstellen Sie einen Übergangsverlaufseffekt in CSS3
So erstellen Sie einen Übergangsverlaufseffekt in CSS3
- php中世界最好的语言Original
- 2017-11-24 10:46:292607Durchsuche
Jeder weiß, dass es in CSS3 einen Übergangsverlaufseffekt gibt, daher werde ich Ihnen dieses Mal die Verwendung von Übergangsverläufen und deren Verwendungsfähigkeiten mitteilen. Hier ist ein kleines Beispiel.
Mit CSS3-Verläufen können Sie sanfte Übergänge zwischen zwei oder mehr angegebenen Farben anzeigen.
· Radiale Farbverläufe definieren
Linear-Farbverlauf (Farbe 1, Farbe 2)
Verwendung mit linearem Farbverlauf: radialer FarbverlaufGleichmäßig verteilte Farben
Hintergrund
: -webkit-radial-gradient(rot, grün, blau) ;Farbverteilung nach Prozentsatz
Hintergrund: -webkit-radial-gradient(rot 5 %, grün 15 %, blau 60 %);Gehäuse:
Es gibt so viele Möglichkeiten, Übergangsverläufe zu verwenden. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website
Andere<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
#dv{
border:1px solid #000;
width:150px;
height:150px;
/*background: -webkit-radial-gradient(red, green, blue);
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);*/
background: -webkit-radial-gradient( red, yellow, green);
}
</style>
<body>
<div id="dv">
</div>
</div>
</body>
</html> verwandte Artikel!
So verwenden Sie absolute und relative Pfade in HTML
Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Übergangsverlaufseffekt in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!