ウェブサイト制作において、ユーザーエクスペリエンスの向上は非常に重要な課題です。創造的なデザインはユーザーの注目を集めるだけでなく、ユーザーエクスペリエンスを大幅に向上させることができます。この記事では、以前に学習した 3D キューブとプログレス バーを大胆に組み合わせて、純粋な CSS3 3D 回転キューブ プログレス バー エフェクトを作成します。
オンラインプレビュー ソースコードダウンロード
Webサイト制作において、ユーザーエクスペリエンスの向上は非常に重要なタスクです。創造的なデザインはユーザーの注目を集めるだけでなく、ユーザーエクスペリエンスを大幅に向上させることができます。この記事では、以前に学習した 3D キューブとプログレス バーを大胆に組み合わせて、純粋な CSS3 3D 回転キューブ プログレス バー エフェクトを作成します。
最初に効果をプレビューしましょう:
HTML 構造
<div class="wrap"> <div class="cube"> <div class="front"> <div class="progress">Loading ...</div> </div> <div class="back"> <div class="progress">Loading ...</div> </div> <div class="top"> <div class="progress">Loading ...</div> </div> <div class="bottom"> <div class="progress">Loading ...</div> </div> <div class="left"></div> <div class="right"></div> </div></div>
この 3D キューブ進行状況バーの HTML 構造は、最初に説明した単純な 3D キューブとは少し異なります。プログレスバーもアニメーション化する必要があるため、div の追加レイヤーでプログレスバーをラップします。クラスの進行状況を示す div は、進行状況バーをアニメーション化するために使用されます。これらは、上部、下部、前面、背面にあります。新しいプログレス バーの値を設定するときは、これらの 4 つの面を使用してプログレス バーをアニメーション化します。
CSS スタイル:
.wrap { perspective: 1000px; perspective-origin: 50% 50%; /* Change this to adjust the 3d bar tilting */ transform: rotateZ(0.01turn) rotateY(0.01turn);}.progress{ height: 100%; width: 0%; padding: 0px; transition: width 2s ease; overflow: visible; text-align: center; color: #000; font-family: verdana; font-size: 20px; white-space: nowrap; line-height: 45px; border-right: solid 2px #444; background-size: 50px 50px; /* Blue stripes */ background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%); animation: bganim 1s linear 2s infinite;}@keyframes bganim { to { background-position: 50px;}}.cube { margin: auto; position: relative; height: 50px; width: 500px; transform-style: preserve-3d; animation: rotate 20s infinite linear;} .cube > div { position: absolute; box-sizing: border-box; height: 100%; width: 100%; border: solid 1px #eee; background-size: 50px 50px; /* Grey stripes */ background-image: linear-gradient(135deg,#ddd 25%,#eee 25%,#eee 50%, #ddd 50%, #ddd 75%,#eee 75%,#eee 100%); animation: bganim 1s linear 2s infinite;}.cube > .left,.cube > .right{ height: 50px; width: 50px;} .front { transform: translateZ(25px);} .back { transform: translateZ(-25px) rotateX(180deg);} .top { transform: rotateX(-270deg) translateY(-25px); transform-origin: top center;} .bottom { transform: rotateX(270deg) translateY(25px); transform-origin: bottom center;} .left { transform: rotateY(270deg) translateX(-25px); transform-origin: center left;}.right { transform: rotateY(-270deg) translateX(25px) translateZ(450px); transform-origin: top right;} /* Rotating the 3d rectangle */@keyframes rotate { 100%{ transform: rotateX(1turn); }}
ブラウザ互換
このプログレスバー効果は、IE を除くすべての最新ブラウザで機能します。 Internet Explorer は、preserve-3d 属性をサポートしていないため、すべての面が平面としてレンダリングされ、同じ面のように見えます。上記のコードでブラウザの製造元のプレフィックスを使用するのが最も簡単です。Webkit コアを備えたブラウザには -webkit- プレフィックスを追加し、他のブラウザには対応するプレフィックスを追加する必要があります。
経由: http://www.w2bc.com/Article/25385
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
