css3スフィアを実現する方法-CSSチュートリアル-php.cn

css3スフィアを実現する方法

青灯夜游

リリース： 2022-01-20 16:47:23

オリジナル

3813 人が閲覧しました

css3 で球を実装する方法: 1. 幅と高さが等しい正方形要素を作成し、border-radius 属性を使用して円に設定します。2. "background:radial-gradient( ...)" ステートメントは、円形要素に放射状のグラデーション背景色を追加して、球体効果を実現します。

css3スフィアを実現する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

#css3 球を実装する手順:

1. 基本的な形状

実装してみましょう基本的な円の HTML コードは次のとおりです。

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

ログイン後にコピー

ここでは新しい HTML5 タグ図が使用されていますが、他のタグも使用できます。 Figure タグは、Web ページに写真やその他のグラフィックコンテンツを表示するために特に使用されます。円形の効果を実現するには、いくつかの基本スタイルを追加します:

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

ログイン後にコピー

css3スフィアを実現する方法

2, 放射状グラデーション

上記は基本的なスタイルを実装しています。より現実的な球体を実現するために、円形エフェクト、放射状グラデーションエフェクトがここに追加されます。

.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);
}

ログイン後にコピー

css3スフィアを実現する方法

3. 影を追加して立体感を高める

基本的な球体効果は前のセクションで作成しました。 . 立体感を高めるため、ボールの下部に影を入れて立体感を出します。

ここで使用される HTML コードは次のとおりです:

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

ログイン後にコピー

CSS コードは次のとおりです:

.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;
			}

ログイン後にコピー

css3スフィアを実現する方法