ホームページ > 記事 > ウェブフロントエンド > css3スフィアを実現する方法
css3 で球を実装する方法: 1. 幅と高さが等しい正方形要素を作成し、border-radius 属性を使用して円に設定します。2. "background:radial-gradient( ...)" ステートメントは、円形要素に放射状のグラデーション背景色を追加して、球体効果を実現します。
このチュートリアルの動作環境: 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; }
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); }
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; }
(学習ビデオの共有: css ビデオ チュートリアル )
以上がcss3スフィアを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。