So erstellen Sie einen Übergangsverlaufseffekt in CSS3-CSS-Tutorial-php.cn

So erstellen Sie einen Übergangsverlaufseffekt in CSS3

php中世界最好的语言

Freigeben： 2017-11-24 10:46:29

Original

2539 Leute haben es durchsucht

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.

-Webkit-Gradient Links/Rechts/Teilungsrichtung

· Radiale Farbverläufe definieren

Linear-Farbverlauf (Farbe 1, Farbe 2)

Verwendung mit linearem Farbverlauf:

radialer Farbverlauf

Gleichmäß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>

Nach dem Login kopieren

verwandte Artikel!

Verwandte Lektüre:

So verwenden Sie absolute und relative Pfade in HTML

Häufig verwendete Zeichentechniken für Canvas in HTML5

So zeigen Sie HTML-Text vertikal an

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!