2. 程式人生 > >一個超炫酷帶陰影的CSS/Sass 3D進度條

一個超炫酷帶陰影的CSS/Sass 3D進度條

阿新 • • 發佈：2019-02-13

（點選上方公眾號，可快速關注）

英文： Rafael González  譯文：碼農網 – 小峰 

www.codeceo.com/article/css3-sass-3d-progress-bar.html

今天我們想向大家展示如何建立一些具有特殊3D外觀的純CSS進度條。不妨將本教程當作是一個高階的CSS練習，以更深入地瞭解更多有趣的3D屬性和著色技術。僅使用CSS建立UI元件將訓練你的創造性思維，並且在本教程中，我們將通過製作進度條並動畫化來向大家展示一些如何建立更復雜形狀的技巧。

注意：某些CSS屬性僅在現代瀏覽器中受支援。IE仍然不支援transform-style：preserve-3d，這是一個用於建立巢狀3D結構的關鍵屬性；所以進度條在IE瀏覽器中將是扁平/無效的。

瀏覽器支援：Chrome Firefox Internet Explorer Safari Opera

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1

原始碼下載(http://www.html5tricks.com/jquery-css3-3d-progress-bar.html)

我們將在本教程中使用Sass（與Compass一起使用），因此請確保設定並瞭解其基礎知識：

  • 安裝Sass和Sass Basics

  • 安裝Compass Stylesheet Authoring Framework和Compass CSS3

如果你想對動畫進度條使用完整的解決方案，那麼你應該檢視Kimmo Brunfeldt的ProgressBar.js或HubSpot的PACE，以獲得出色的頁面載入進度條。

為了生成所有必要的字首，你可以使用像Autoprefixer或用於Sublime Text的外掛。

我們將使用許多有趣的CSS屬性，如transform，perspective和box-shadow。我們還將大量使用SASS，以節省生成進度條的位置和外觀所需的很多時間。通過使用相對大小（em，百分比），我們可以確保進度條的大小易於調整。

構建面

我們先從構建一個包含所有六個面的框開始。這個框將作為我們的主要容器，用來設定進度條的尺寸及其視點。我們還將使用一個包裝器用於透檢視，並且這個包裝器的font-size屬性將允許使用某些em單位魔法的幫助來擴充套件進度條。

為了確保所有的面都是我們3D空間的一部分，我們需要將transform-style: preserve-3d應用於框。

所以讓我們從初始化一些顏色變數開始來編寫樣式吧：

$light-gray: #e0e0e0;

$magenta: #ec0071;

$white: #f5f5f5;

.perspective{

  font-size: 5em;// sets the main scale size

  perspective: 12em;// sets the perspective

  perspective-origin: 50% 50%;

  text-align: center;

}

.bar{

  display: inline-block;

  width: 1em;

  height: 1em;

  margin-top: 1em;

  position: relative;

  transform: rotateX(60deg);// sets the view point

  transform-style: preserve-3d;// perspective for the children

}

現在，我們來看看這些面。如果我們想要能夠毫無困難地重新調整我們的主框，裡面包含的面必須得像液體一樣具有流動行為以及具備絕對位置。

.bar{

  // -> The SCSS written before

  .bar-face{

    display: inline-block;

width: 100%;

height: 100%;

position: absolute;

bottom: 0;

left: 0;

background-color: rgba($light-gray,.6);// just to see what is happening

  }

}

寫標記並且確保它是可以訪問的：

<div class="perspective">

  <div class="bar"role="progressbar"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100">

    <div class="bar-face"/>

<div class="bar-face"/>

<div class="bar-face"/>

<div class="bar-face"/>

<div class="bar-face"/>

<div class="bar-face"/>

  </div>

</div>

如果你有興趣瞭解更多有關可訪問性的資訊，這篇文章（由Gez Lemon撰寫）幫助我了很多： ‘Introduction to WAI ARIA’

設定面

這是非常重要的一部分。進度條的面必須準確定向，這樣當我們開始新增百分比填充時，就不會陷入困境。

.bar {

// -> The SCSS from before

.bar-face {

// -> The SCSS from before

transform-origin: 50% 100%;

&.roof {

transform: translateZ(1em);

}

&.front {

transform: rotateX(-90deg);

}

&.right {

left: auto;

right: -.5em;

width: 1em;

transform: rotateX(-90deg) rotateY(90deg) translateX(.5em);

}

&.back {

transform: rotateX(-90deg) rotateY(0deg) translateZ(-1em);

}

&.left {

width: 1em;

transform: rotateX(-90deg)rotateY(-90deg) translateX(-.5em) translateZ(.5em);

}

}

}

<div class="perspective">

  <div class="bar"role="progressbar"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100">

    <div class="bar-face roof"/>

    <div class="bar-face front"/>

    <div class="bar-face left"/>

    <div class="bar-face right"/>

    <div class="bar-face back"/>

    <div class="bar-face floor"/>

  </div>

</div>

0?wx_fmt=jpeg

好的，這是一個很棒的立方體，但是我們要為進度條建立一個矩形。如果你還記得的話，我們已經用一種液體化的方法構建了面，所以如果我們只是增加.bar類的width，那麼這樣就可以。在這個例子中，我們使用了4em的寬度。

0?wx_fmt=jpeg

構建百分比填充

百分比填充將包含在面內，並且，為了保持HTML程式碼的最小化，我們將使用偽類:before。這樣生成的:before元素將顯示相對於面寬度的百分比。

.bar {

// -> The SCSS from before

.bar-face {

// -> The SCSS from before

&.percentage:before {

content: '';

display: block;

position: absolute;

bottom: 0;

width: 0;

height: 100%;

margin: 0;

background-color: rgba($magenta, .8);

transition: width .6s ease-in-out;

}

}

}

<div class="perspective">

<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">

<div class="bar-face roof percentage"/>

<div class="bar-face front percentage"/>

<div class="bar-face left"/>

<div class="bar-face right"/>

<div class="bar-face back percentage"/>

<div class="bar-face floor percentage"/>

</div>

</div>

0?wx_fmt=jpeg

現在我們需要編寫百分比填充樣式。手動編寫一百個類將會非常繁瑣，所以讓我們寫一些可靠的迴圈來從HTML中獲取aria-valuenow屬性的所有值。

.bar {

// -> The SCSS from before

.bar-face {

// -> The SCSS from before

}

@for $i from 0 to 101 {

&[aria-valuenow='#{$i}'] {

.percentage:before {

                width: $i * 1%;

}

}

}

}

如果你想立竿見影地看到成果，那麼只需將HTML中的aria-valuenow屬性從0更改至100。

構建面板

為了構建面板，我們將使用Sass mixins。為了得到一個現實化的外觀，我們將使用box-shadow屬性。這個屬性支援一個數組的值，並且這個陣列將允許我們模擬照明。我們將在這個屬性中包含地面陰影和麵的採光。

@mixin build-skin($color, $name) {

&.#{$name} {

.floor {

box-shadow:

0 -0.2em 1em rgba(0,0,0,.15),

0 0.2em 0.1em -5px rgba(0,0,0,.3),

0 -0.75em 1.75em rgba($white,.6);

}

.left {

background-color: rgba($color, .5);

}

.percentage:before {

background-color: rgba($color, .5);

相關推薦

一個超炫酷帶陰影的CSS/Sass 3D進度條

（點選上方公眾號，可快速關注） 英文： Rafael González  譯文：碼農網 – 小峰  www.codeceo.com/article/css3-sass-3d-progress-bar.html 今天我們想向大家展示如何建立一些具有特殊3D外觀的純CSS進度條。不妨將本教程當作是一

uwp - 做一個相對炫酷的動畫按鈕/按鈕動畫

原文: uwp - 做一個相對炫酷的動畫按鈕/按鈕動畫 　　看膩了系統自帶的button animation何不嘗試下自定義一個較為炫酷的動畫順便提升使用者體驗。效果圖： 動畫分為幾個部分，分別是：內圓從中心放大（1）並同時漸隱（2），外圓從中心放大（3）並同時漸隱（4），按鈕整體從中心縮小放大（5）

WebGIS簡單實現一個區域炫酷的3D立體地圖效果

1.別人的效果         作為一個GIS專業的，做一個高大上的GIS系統一直是我的夢想，雖然至今為止還沒有做出一個理想中的系統，但是偶爾看看別人做的，學習下別人的技術還是很有必要的。眼睛是最容易誤導我們的，有時候看著炫酷的效果，可能只是因為一點視覺誤差，本文用一個別人的系統介面來解析如何實現一個小區域

用canvas完成超炫酷的數字時鐘

<canvas id="canvas" style="height:100%"> 這次要完成的是一個很炫酷很炫酷的時鐘， 如圖   每一次時鐘更新都伴隨有很多彩色小球落下，很不是很贊啊！O(∩_∩)O~ 這個東西呢，主要用到了兩個方面的東西：canvas和js

bootstrap建立帶遮罩層的進度條

前言 本篇部落格為轉載！！！ 特此宣告： 1.原文連結：http://51coding.blog.51cto.com/6079322/1754415 2.原作者資訊：51cto部落格的guyuexuan2012 3.原作者宣告：原創作品，允許轉載，轉載時請務必以超連結形式標明文章

純css實現頂部進度條隨滾動條滾動

<!DOCTYPE html> <head> 　　<meta charset="utf-8"> 　　<meta http-equiv="X-UA-Compatible" content="IE=edge"> 　　<tit

HTML5 canvas帶漸變色的圓形進度條動畫

query-circle-progress是一款帶漸變色的圓形進度條動畫特效jQuery外掛。該圓形進度條使用的是HTML5 canvas來繪製圓形進度條及其動畫效果，進度條使用漸變色來填充，效果非常的酷。

css+jquery步驟進度條

<!doctype html> <html> <head> <meta charset="utf-8"> <title>progressbar</title> <style> .progre

Android 效果之帶刻度的半圓環進度條小述

一、背景 最近準備要做一個類似儀表盤樣式的半圓環帶刻度可拖動的進度條來展示和設定溫度，網上找了找demo，都和實際的需求有點區別，感覺這種功能實現起來不難，就索性自己弄了一個。 二、正文 在開始之前，我們來看下實際的執行效果，看看能不能滿足正在查詢資料的小夥伴的

CircleProgressBar 帶載入動畫的環形進度條

<am.widget.circleprogressbar.CircleProgressBar android:layout_width="match_parent" android:layout_height="480dp" app:cpbGravity="center"

一個簡單的自定義View，仿圓形進度條

一個很簡單的小例子，，整理一下 效果圖 上程式碼，程式碼中應該註釋很清楚了，就不再贅述，是模仿洋大神寫的，然後自己又加了一點兒自己的理解。 程式碼如下 package com.example.roundview; import android.content.Cont

帶動畫效果的圓形進度條顯示定時器倒計時

在實際專案開發中我們經常要使用進度條監聽下載進度，使用的大多是在UIView中的- (void)drawRect:(CGRect)rect方法中描繪圓形路徑，然後通過傳過來的進度值計算圓形路徑百分比達到監聽效果，這種監聽進度方法適合檔案下載，但是我們開發中有時會

Android 自定義圓形帶刻度漸變色的進度條

效果圖 一、繪製圓環 圓環故名思意，第一個首先繪製是圓環 1：圓環繪製函式 圓環API public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter,

用CSS畫一個帶陰影的三角形的示例代碼

xhtml 假設 :after doc col tps left targe ner 1. 思路 怎麽用CSS3畫一個帶陰影的三角形呢 ? 有童鞋說, 這還不簡單嗎 網上有很多解決方案, 但其實大多都是實現不太完美的, 存在一些問題 假設我們做一個向下的三角形箭頭 常見

Android 從無到有打造一個炫酷的進度條效果

fault ref size art href 一個 font itl top 從無到有打造一個炫酷的進度條效果Android 從無到有打造一個炫酷的進度條效果

純CSS程式碼實現翻轉選單的炫酷效果

1、思路分析 滑鼠移入選單出現並翻轉 滑鼠移出收回選單 2、完整程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta char

炫酷 CSS 背景效果的 10 個代碼片段

pos 圖片 http 動效 變色 基於用戶 漸變 ani 面板 在現代網頁設計中，大背景圖設計非常流行。隨著高清（現在是4K）顯示器的出現，越來越多的網頁設計師使用大背景圖來填充屏幕。 因為這樣可以造成很大的視覺沖擊力，並有助於更好的傳遞所要表現的內容。 但是，如果只是吧

如何用純 CSS 創作炫酷的同心矩形旋轉動畫

效果預覽 線上演示 按下右側的“點選預覽”按鈕可以在當前頁面預覽，點選連結可以全屏預覽。 https://codepen.io/comehope/pen/bMvbRp 可互動視訊教程 此視訊是可以互動的，你可以隨時暫停視訊，編輯視訊中的程式碼。 請用 chrom

用pyqt繪製一個無邊框、有陰影、帶圖片背景的（偽頂層）圓角視窗

物件：（要設定的只有Form和widget） widget在Form內，緊貼著Form，之間隔著Form的layoutMargin（邊緣）的寬度： 物件Form的佈局（邊緣）設定： 物件widget的佈局（邊緣）設定： 思路： 首先先交代： 無邊框用：

一個炫酷的對話方塊依賴庫

本文介紹了一個炫酷的對話方塊的依賴庫，對於菜鳥來說，先拿來用吧，在去研究別人寫的原始碼，用起來也很簡單！ compile 'cn.pedant.sweetalert:library:1.3' compile 'com.jakewharton:butterknife:5.1.