超绚丽CSS3多色彩发光立方体旋转动画
CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。css3动画的属性主要分为三类：transform、transition以及animation。
下面就是用CSS3动画animation做的立方体旋转动画
例图：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
background: #222;
}
.world {
-webkit-perspective: 800px;
perspective: 800px;
width: 100vh;
height: 100vh;
position:absolute;
left:40%;
top:35%;
}
.cube {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
width: 50vh;
height: 50vh;
position: relative;
-webkit-animation: rotator 4.5s linear infinite;
animation: rotator 4.5s linear infinite;
outline: 0;
}
.cube * {
background: #000;
box-shadow: 0 0 3vh currentColor;
-webkit-transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.cube:hover * {
background: currentColor;
box-shadow: 0 0 20vh currentColor;
}
.cube .cube__front {
color:orange;
-webkit-transform: translateZ(25vh);
transform: translateZ(25vh);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cube .cube__right {
color:purple;
-webkit-transform: rotateY(90deg) translateZ(25vh);
transform: rotateY(90deg) translateZ(25vh);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cube .cube__left {
color: pink;
-webkit-transform: rotateY(270deg) translateZ(25vh);
transform: rotateY(270deg) translateZ(25vh);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cube .cube__back {
color: seagreen;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateY(180deg) translateZ(25vh);
transform: rotateY(180deg) translateZ(25vh);
}
.cube .cube__top {
color: mediumseagreen;
-webkit-transform: rotateX(90deg) translateZ(25vh);
transform: rotateX(90deg) translateZ(25vh);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cube .cube__bottom {
color: dodgerblue;
-webkit-transform: rotateX(270deg) translateZ(25vh);
transform: rotateX(270deg) translateZ(25vh);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@-webkit-keyframes rotator {
0% {
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);
}
}
@keyframes rotator {
0% {
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="world">
<div class="cube" tabindex="0">
<div class="cube__front"></div>
<div class="cube__back"></div>
<div class="cube__left"></div>
<div class="cube__right"></div>
<div class="cube__top"></div>
<div class="cube__bottom"></div>
</div>
</div>
</body>
</html>
-webkit-perspective
浏览器支持
目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
-webkit-transform-style: preserve-3d; 属性规定如何在 3D 空间中呈现被嵌套的元素。
Firefox 支持 transform-style 属性。
Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。
CSS3 Animation最大的优点是解决了：
transition动画只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
CSS 3Animation就是为了解决这些问题而提出的。
超绚丽CSS3多色彩发光立方体旋转动画的更多相关文章
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- CSS3实现3D木块旋转动画
CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...
- CSS3 3D图片立方体旋转
html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- HTML5 CSS3 诱人的实例： 3D立方体旋转动画
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34120047 创意来自:http://www.html5tricks.com/d ...
- CSS3实现3D球体旋转动画
html <div class="ball-box"> <div class="ball"> <div class="l ...
- 3D立方体旋转动画
在线演示 本地下载
- 9款超绚丽的HTML5/CSS3应用和动画特效
1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...
- 9个超绚丽的HTML5 3D图片动画特效
在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...
随机推荐
- [Luogu3041][USACO12JAN]视频游戏的连击Video Game Combos
题面 sol 设\(f_{i,j}\)表示填了前\(i\)个字母,在\(AC\)自动机上跑到了节点\(j\)的最大得分.因为匹配需要暴跳\(fail\)所以预先把\(fail\)指针上面的匹配数传下来 ...
- [SDOI2013]森林
主席树 离散化后 每个点储存从根到它的路径上的点权 新加边时直接用启发式合并,直接把size小的重构 询问时sum[u]+sum[v]-sum[lca]-sum[fa[lca]]来比较,在树上二分 L ...
- Android OpenGL ES 开发（十）: 通过GLES20与着色器交互
1. 获取着色器程序内成员变量的id(句柄.指针) GLES20.glGetAttribLocation方法:获取着色器程序中,指定为attribute类型变量的id. GLES20.glGetUni ...
- div闪一下就消失
<div id="saveCode" class="center" style="display:none;width:300px;height ...
- java map遍历、排序，根据value获取key
Map 四种遍历: Map<String,String> map = new HashMap<String, String>(); map.put("one" ...
- 不能为虚拟电脑 ubuntu 打开一个新任务.
使用virtualbox报错: 不能为虚拟电脑 ubuntu3 打开一个新任务. The virtual machine 'ubuntu3' has terminated unexpectedly d ...
- cookie 使用方法
//写cookies setCookie: function(name, value) { let days = 1 let exp = new Date() exp.setTime(exp.getT ...
- 使用git指令下载github仓库代码(笔记)
通过Git指令下载源码 Git概念说明 三种状态:修改状态.暂存状态和Git仓库 基本的Git工作流程: 在工作目录中修改文件 暂存文件,将文件的快照放入暂存区域 提交更新,找到暂 ...
- Ubuntu下sudo命令出现无法解析主机名
替换hosts文件后sudo命令提示 无法解析主机名 把hosts文件中127.0.0.1后的名字改为主机名,即 /etc/hostname 中的名字
- springMVC的异常处理
1. 异常 什么是异常: 在程序中预期会出现,但是却无法处理的问题,叫做异常 异常处理原则: 延迟处理 先记着...,后续补充