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:292594Durchsuche

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>

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!

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 erzeugen Sie in CSS3 den Effekt, die Tür zu schließen und zu öffnenNächster Artikel：So erzeugen Sie in CSS3 den Effekt, die Tür zu schließen und zu öffnen

In Verbindung stehende Artikel

Mehr sehen