在网站制作中,提高用户体验度是一项非常重要的任务。一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验。在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D旋转立方体进度条效果。

在线预览   源码下载

在网站制作中,提高用户体验度是一项非常重要的任务。一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验。在这篇文章中,我们将大胆的将前面所学的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。class为progress的div是用于制作进度条动画的,它们位于上下和前后4个面中。当我们设置新的进度条值时,就使用这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浏览器之外的所有现代浏览器。IE浏览器不支持preserve-3d属性,因此所有的面都被渲染为平面,看起来就像是同一个面。最易上面的代码中没有使用浏览器厂商的前缀,你应该为Webkit内核的浏览器添加-webkit-前缀,以及其他浏览器添加相应的前缀。

via:http://www.w2bc.com/Article/25385

纯CSS炫酷3D旋转立方体进度条特效的更多相关文章

  1. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  2. 纯CSS炫酷的3D旋转

    <html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...

  3. 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  5. Qt实现炫酷启动图-动态进度条

    目录 一.简述 二.动效进度条 1.光效进度条 2.延迟到达进度条 3.接口说明 三.启动图 1.实现思路 2.背景图切换 四.测试 1.构造启动图 2.背景图 3.其他信息 4.事件循环 五.源码 ...

  6. 【PyQt5-Qt Designer】制作炫酷的启动界面+进度条

    QProgressBar 进度条+QSplashScreen 启动界面 知识点: 1.进度条 #将进度条的最大值.最小值设置为相同时,产生跑马灯效果 self.progressBar.setMinim ...

  7. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  8. js和CSS3炫酷3D相册展示

    <!doctype html> <html> <head> <meta charset="UTF"> <title>js ...

  9. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

随机推荐

  1. jQuery中读取json文件

    json文件是一种轻量级的数据交互格式.一般在jquery中使用getJSON()方法读取. $.getJSON(url,[data],[callback]) url:加载的页面地址 data: 可选 ...

  2. JobControl 的实现原理

    本文地址:http://www.cnblogs.com/archimedes/p/hadoop-jobcontrol.html,转载请注明源地址. 引入实例:贝叶斯分类 贝叶斯分类是一种利用概率统计知 ...

  3. PHP登入网站抓取并且抓取数据

    有时候需要登入网站,然后去抓取一些有用的信息,人工做的话,太累了.有的人可以很快的做到登入,但是需要在登入后再去访问其他页面始终都访问不了,因为他们没有带Cookie进去而被当做是两次会话.下面看看代 ...

  4. 【Linux】shell字符串分割、数组访问、条件判断

    参考资料: shell字符串分割再循环:http://www.shangxueba.com/jingyan/1633455.html linux shell中 if else以及大于.小于.等于逻辑表 ...

  5. 会说话的HTML--语义化杂谭-TGideas-腾讯游戏官方设计团队

    家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着“臭爸爸”:你让他把鞋穿上,他会提起鞋子往楼下扔...在小孩的世界里,他虽然会说话,但不一定明白其中的意思,不能正 ...

  6. [Ext JS 4] 实战之 带week(星期)的日期选择控件

    前言 Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有). 但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周. 遗憾的是Ext js 并没有提供 ...

  7. 在github Pages上部署octopress搭建个人博客系统

    原文链接:http://caiqinghua.github.io/blog/2013/08/26/deploy-octopress-to-github-pages/ 引子 上一篇博客已经说了为什么要搭 ...

  8. Cleaner ITweenPath Source

    iTweenPath.cs [pyg language="csharp" s="monokai" ] //Slight additions for a clea ...

  9. 基于JUnit3.8的一个简单的测试程序

    实现一个简单的计算 注:目标类和测试类要放在同一包下, JUnit单元测试基础要点 目标类:Calculator.java package com.junit3_8; public class Cal ...

  10. Python 正则表达式学习摘要及资料

    来源:Michael_翔_ 摘要 在正则表达式中,如果直接给出字符,就是精确匹配. {m,n}? 对于前一个字符重复 m 到 n 次,并且取尽可能少的情况 在字符串'aaaaaa'中,a{2,4} 会 ...