So realisieren Sie eine CSS3-Sphäre

So implementieren Sie eine Kugel in CSS3: 1. Erstellen Sie ein quadratisches Element mit gleicher Breite und Höhe und legen Sie es mit dem Attribut „border-radius“ auf einen Kreis fest. 2. Verwenden Sie „background:radial-gradient(...“ )“-Anweisung, um es auf einen Kreis festzulegen. Fügen Sie dem Element eine radial verlaufende Hintergrundfarbe hinzu, um einen Kugeleffekt zu erzielen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Schritte zum Implementieren einer Kugel in CSS3:

1. Grundform

Der HTML-Code lautet zunächst wie folgt:

<figure class="circle"></figure>

Was hier verwendet wird, ist die neue Tag-Figur In HTML5 können Sie auch andere Labels verwenden. Der Figure-Tag wird speziell zur Anzeige von Bildern oder anderen grafischen Inhalten auf Webseiten verwendet. Um einen kreisförmigen Effekt zu erzielen, fügen Sie einige grundlegende Stile hinzu:

.circle {
display: block;
background: black;
border-radius: 50%;
height: 300px;
width: 300px;
margin: 0;
}

2. Radialer Farbverlauf

Der grundlegende kreisförmige Effekt wird oben erzielt, und der radiale Farbverlaufseffekt wird hier hinzugefügt, um eine realistischere Kugel zu erzielen.

.circle {
  display: block;
  background: black;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: 0;
  background: -webkit-radial-gradient(100px 100px, circle, #5cabff, #000);
  background: -moz-radial-gradient(100px 100px, circle, #5cabff, #000);
  background: radial-gradient(100px 100px, circle, #5cabff, #000);
}

3. Fügen Sie Schatten hinzu, um den dreidimensionalen Effekt zu verstärken. Der grundlegende Kugeleffekt wurde im vorherigen Abschnitt erzeugt. Um den dreidimensionalen Effekt zu verstärken, fügen wir unten einen Schatten hinzu des Balls, so dass der dreidimensionale Effekt stärker ist.

Der hier verwendete HTML-Code lautet wie folgt:

<section class="stage">
	<figure class="circle"><span class="shadow"></span></figure>
</section>

Der CSS-Code lautet wie folgt:

.stage {
				width: 300px;
				height: 300px;
				display: inline-block;
				margin: 20px;
				-webkit-perspective: 1200px;
				-webkit-perspective-origin: 50% 50%;
			}

			.circle .shadow {
				position: absolute;
				width: 100%;
				height: 100%;
				background: -webkit-radial-gradient(50% 50%, circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
				-webkit-transform: rotateX(90deg) translateZ(-150px);
				z-index: -1;
			}

(Teilen von Lernvideos: CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonSo realisieren Sie eine CSS3-Sphäre. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!