酷炫的阴影3D进度条:CSS/Sass

今天我想给大家分享的是一个关于如何用CSS/Sass创建一些有趣的3D进度条的教程。了解如何使用框阴影和渐变创建逼真的外观皮肤。(源码下载在文章末尾)

我们将向您展示如何创建一些纯CSS进度条与一个特殊的3D外观。考虑本教程的一个高级CSS练习,它将让您深入了解许多有趣的3D属性和着色技术。仅使用CSS创建UI组件将训练您跳出固有思维模式的能力,在本教程中,我们将向您展示如何创建更复杂的形状、如何将其用作进度条和动画。

注意:某些CSS属性仅在现代浏览器中受支持。IE仍然不支持transform-style:preserve-3d,这是一个用于创建嵌套3D结构的关键属性;所以进度条在IE浏览器中将是扁平/无效的。

浏览器支持:ChromeFirefoxInternetExplorerSafariOpera

我们将在本教程中使用Sass(与Compass一起使用),因此请确保设置并了解其基础知识:

安装Sass和Sass基础

安装Compass样式表创作框架和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应用于框。

所以让我们从初始化一些颜色变量开始来编写样式吧:

现在,我们来看看这些面。如果我们想要能够毫无困难地重新调整我们的主框,里面包含的面必须得像液体一样具有流动行为以及具备绝对位置。

写标记并且确保它是可以访问的:

设置面

这是非常重要的一部分。进度条的面必须准确定向,这样当我们开始添加百分比填充时,就不会陷入困境。

好的,这是一个很棒的立方体,但是我们要为进度条创建一个矩形。如果你还记得的话,我们已经用一种液体化的方法构建了面,所以如果我们只是增加.bar类的width,那么这样就可以。在这个例子中,我们使用了4em的宽度。

构建百分比填充

百分比填充将包含在面内,并且,为了保持HTML代码的最小化,我们将使用伪类:before。这样生成的:before元素将显示相对于面宽度的百分比。

现在我们需要编写百分比填充样式。手动编写一百个类将会非常繁琐,所以让我们写一些可靠的循环来从HTML中获取aria-valuenow属性的所有值。

如果你想立竿见影地看到成果,那么只需将HTML中的aria-valuenow属性从0更改至100。

构建皮肤

为了构建皮肤,我们将使用Sass mixins。为了得到一个现实化的外观,我们将使用box-shadow属性。这个属性支持一个数组的值,并且这个数组将允许我们模拟照明。我们将在这个属性中包含地面阴影和面的采光。

此外,我们需要一个照亮面的技巧。如果我们以正确的顺序输入面的DOM节点,我们将看到奇迹:

这里发生了什么?很简单:当浏览器渲染一个绝对元素时,默认情况下它会添加一个自动递增的z-index(如果我们不编辑此属性的话)。所以,如果我们通过先放置底部的面来改变渲染顺序,那么它的阴影就会覆盖在背面的所有面上。这就是我们实现现实化阴影的原理。

关于如何实现进度条就都在这里了!现在,请查看所有DEMO演示和源代码文件,然后开始构建皮肤来训练自己此技能吧。

感谢各位的阅读,希望本教程能对你有所帮助!

原文地址:

https://tympanus.net/codrops/2015/09/30/shaded-progress-bars-css-sass-excercise/

翻译作者:小峰

有你想看的精彩

感谢您的阅读,如果你觉得我的公众号还不错,请多帮我推荐给你的朋友,多谢了。

前端大牛爱好者:每天一篇前端技术文章,不定时前端干货发送

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180810B1A4E700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券