君は思いもよらなかった.CSSが実現する各種球体効果【オンラインデモ付】

CSSは思わぬ効果をたくさん実現できますが、今日はCSSを使っていろいろな球体効果を実現してみましょう.2つの方法が実現でき,1つ目は大量の要素を用いて実際の3 D球を作成することであり,この方法には潜在的な性能問題がある.もう1つはCSS 3のグラデーションとシャドウ特性を用いて実現され、実現方法が簡単で、効果が美しい.
効果を保証するためにChrome、Firefox、Safariなどの現代ブラウザを使って閲覧してください.
興味のある記事

Metronic–Bootstrapレスポンスベースのバックグラウンド管理テンプレート

Verlet-js:超眩しいオープンソースJavaScript物理エンジン推奨

Transit–超スムーズCSS遷移と変換アニメーション効果プラグイン

Debuggex–非常に使いやすい正規表現の可視化デバッグツール

HTML Inspector–高品質HTMLコード

の作成を支援
 
きほんけいじょう
まず、HTMLコードは次のように基本的な円を実現します.

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

ここではHTML 5の新規タグfigureを使用していますが、他のタグも使用できます.Figureラベルは、Webページの画像や他のグラフの内容を表示するために使用されます.円の効果を得るには、いくつかの基本的なスタイルを追加します.

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

aaa
ラジアルランプ
上には基本的な円形効果が実現され、ここでは半径方向のグラデーション効果を増やしてよりリアルな球を実現します.
CSSコードは以下の通りです.

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

効果は次のとおりです.
bbb
シャドウと3 D
前節では基本的な球体効果が出てきましたが、立体効果を高めるためにボールの底に影を付けると立体感が強くなります.
ここで使用するHTMLコードは次のとおりです.

<section class="stage">
  <figure class="ball"><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%;
}
.ball .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 3 perspective特性を用いたが、効果は以下の通りである.
ccc
多層シャドウ
よりリアルな球体効果を実現するために、ここでは多層シャドウを適用します.

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: -webkit-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
  );
}
.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 0px, circle, #ffffff, rgba(255, 255, 255, 0) 58%);
  -webkit-filter: blur(5px);
  z-index: 2;
}

次のような効果が得られます.
ddd
ひかりこうか
上の効果はすでに立体感がありますが、ここでは光の効果を変えて、球体がスノーケルビリヤードのように見えます.

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: -webkit-radial-gradient(50% 120%, circle cover, #323232, #0a0a0a 80%, #000000 100%);
}
.ball:before {
  content: "";
  position: absolute;
  background: -webkit-radial-gradient(50% 120%, circle cover, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  bottom: 2.5%;
  left: 5%;
  opacity: 0.6;
  height: 100%;
  width: 90%;
  -webkit-filter: blur(5px);
  z-index: 2;
}
.ball:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 5%;
  left: 10%;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}

効果は次のとおりです.
eee
8番ボール効果
私たちは球体に数字8を加えると、ビリヤードの黒8の効果があります.
HTMLコード:

<section class="stage">
  <figure class="ball">
    <span class="shadow"></span>
    <span class="eight"></span>
  </figure>
</section>

CSSコード:

.ball .eight {
  width: 110px;
  height: 110px;
  margin: 30%;
  background: white;
  border-radius: 50%;
  -webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  position: absolute;
}
.ball .eight:before {
  content: "8";
  display: block;
  position: absolute;
  text-align: center;
  height: 80px;
  width: 100px;
  left: 50px;
  margin-left: -40px;
  top: 44px;
  margin-top: -40px;
  color: black;
  font-family: Arial;
  font-size: 90px;
  line-height: 104px;
}

効果は次のとおりです.
fff
眼球効果
 上の効果はどうですか?あなたが驚いたと信じています.しかし、CSSが乗れるのはこれだけではありません.ここでは眼球効果を実現します.
HTMLコードは次のとおりです.

<section class="stage">
  <figure class="ball">
    <span class="shadow"></span>
    <span class="iris"></span>
  </figure>
</section>

コアCSSコードは以下の通りである.

.iris {
  width: 40%;
  height: 40%;
  margin: 30%;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  -webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  position: absolute;
  -webkit-animation: move-eye-skew 5s ease-out infinite;
}
.iris:before {
  content: "";
  display: block;
  position: absolute;
  width: 37.5%;
  height: 37.5%;
  border-radius: 50%;
  top: 31.25%;
  left: 31.25%;
  background: black;
}
.iris:after {
  content: "";
  display: block;
  position: absolute;
  width: 31.25%;
  height: 31.25%;
  border-radius: 50%;
  top: 18.75%;
  left: 18.75%;
  background: rgba(255, 255, 255, 0.2);
}

最終的な効果:
ggg
動く眼球
前節では眼球効果を実現しましたが、ここではいくつかのキーフレームで眼球を動かし、コアCSSコードは以下の通りです.

@-webkit-keyframes move-eye-skew {
  0% {
    -webkit-transform: none;
  }
  20% {
    -webkit-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
  }
  25%, 44% {
    -webkit-transform: none;
  }
  50%, 60% {
    -webkit-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
  }
  66%, 100% {
    -webkit-transform: none;
  }
}

これで、目が動いて、神様に伝わるでしょう?!
hhh
興味のある記事

OverAPI.com–史上最も完全な開発者のオンライン速報マニュアル

CSS Matic:Webデザイナーに必須の究極のCSSツールボックス

CSS Beautify–便利なオンラインCSSコード美化ツール

ScrollUp–最上位jQueryプラグイン

にカスタマイズ可能

Swipebox–タッチパネル用jQuery Lightboxプラグイン

 
英文リンク:CSS Balls:CSS実現の各種円効果【オンラインデモ付】
コンパイルソース:ドリームスカイ◆フロントエンド開発技術に注目◆Webデザインリソースの共有