超绚丽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的动画效果.本 ...
随机推荐
- java 动态代理 ， 多看看。 多用用。
import java.lang.reflect.InvocationHandler; import java.lang.reflect.Proxy; import java.lang.reflect ...
- Django Middleware简介
1 前言 Django使用非常熟练了,各种API接口不在话下,全都搞定.为方便定位问题在每个API接口的的开始和返回的地方都加上了log打印,记录入参和返回值. 但是这样有一个问题,需要每个 ...
- Hadoop3.0完全分布式集群安装部署
1. 配置为1个namenode(master主机),2个datanode(slave1主机+slave2主机)的hadoop集群模式, 在VMWare中构建3台运行Ubuntu的机器作为服务器: 关 ...
- python smtp模块发送邮件
应用场景: 在服务器上设置的告警参数被触发后,通常是发送手机短信或者邮件通知,本例就以发送邮件为例,手机怎么收邮件呢?以qq邮箱为例,在手机端安装qq邮箱app,触发邮件后,手机也能及时查看了 代码展 ...
- java ssm框架实现分页功能 （oracle）
java web 实现分页功能 使用框架:ssm 数据库:oracle 话说 oracle 的分页查询比 mysql 复杂多了,在这里简单谈一下: 查询 前十条数据: SELECT * FROM( S ...
- 去除IE10自带的清除按钮
最近在工作中碰到了一个问题,原本在IE8,IE9下正常的input表单,在IE10下会出现清除按钮,即表单右侧会出现一个可以清除该表单内容的小叉.由于之前一直没有兼容过IE10,所以我专门搜了下原因. ...
- JDK的安装和Java环境变量配置
所需工具:JDK 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html
- MongoDB3.6之Replica Set初步体验
Replica Set在国内叫做副本集,简单来说就是一份数据在多个地方存储. 1.为什么要用副本集,什么时候使用副本集? 有人说一份数据在多个地方存储占用了大量的额外空间,是一种浪 ...
- Day2------字符编码
复习: 系统启动流程:bios------->找到启动介质---------->把系统加载到内存------------>CPU执行 字符编码 一.字符串------------&g ...
- 【Bootstrap】 bootstrap-select2下拉菜单插件
这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...