demo_03HTML5中的动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: skyblue;
}
html,body{
height: %;;
}
#box1{
width: %;
height: %;
}
#box2{
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
/*perspective: 500px;*/
animation: a 10s linear infinite;
}
.box{
position: absolute;
height: 200px;
width: 200px;
border: 1px solid #fff;
background: rgba(,,,.);
transition: transform 2s ease-in;
color: #fff;
font-size: 25px;
font-weight: bold;
line-height: 200px;
text-align: center;
}
.small{
position: absolute;
top: 50px;
left: 50px;
height: 100px;
width: 100px;
border: 1px solid #;
background: rgba(,,,);
transition: transform 2s ease-in;
}
#before{
transform: translateZ(100px);
}
#after{
transform: translateZ(-100px);
}
#left{
transform: rotateY(90deg) translateZ(100px);
}
#right{
transform: rotateY(90deg) translateZ(-100px);
}
#up{
transform: rotateX(90deg) translateZ(100px);
}
#down{
transform: rotateX(90deg) translateZ(-100px);
}
#s-before{
transform: translateZ(50px);
}
#s-after{
transform: translateZ(-50px);
}
#s-left{
transform: rotateY(90deg) translateZ(50px);
}
#s-right{
transform: rotateY(90deg) translateZ(-50px);
}
#s-up{
transform: rotateX(90deg) translateZ(50px);
}
#s-down{
transform: rotateX(90deg) translateZ(-50px);
} #box2:hover #before{
transform: translateZ(300px);
}
#box2:hover #after{
transform: translateZ(-300px);
}
#box2:hover #left{
transform: rotateY(90deg) translateZ(300px);
}
#box2:hover #right{
transform: rotateY(90deg) translateZ(-300px);
}
#box2:hover #up{
transform: rotateX(90deg) translateZ(300px);
}
#box2:hover #down{
transform: rotateX(90deg) translateZ(-300px);
}
@-webkit-keyframes a{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="before" class="box">
前面
</div>
<div id="after" class="box">
后面
</div>
<div id="left" class="box">
左面
</div>
<div id="right" class="box">
右面
</div>
<div id="up" class="box">
上面
</div>
<div id="down" class="box">
下面
</div> <span class="small" id="s-before"></span>
<span class="small" id="s-after"></span>
<span class="small" id="s-left"></span>
<span class="small" id="s-right"></span>
<span class="small" id="s-up"></span>
<span class="small" id="s-down"></span>
</div>
</div> </body>
</html>
本次的这个demo用了CSS3中的2d和3d属性，完成了一个盒子的立体效果
demo_03HTML5中的动画效果的更多相关文章
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- Android中的动画效果
动画的种类 透明动画alphaAnimation 在代码中配置动画: findViewById(R.id.btnAnimMe).setOnClickListener(new View.OnClickL ...
- css3实现的3中loading动画效果
一.css3中animation动画各种属性详解: animation Value: [<animation-name> || <animation-duration> ...
- Vue中过度动画效果应用
一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...
- css3中的动画效果
css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...
- angular中的动画效果
用angular来形成动画效果的代码如下 <!DOCTYPE html> <html lang="en" ng-app="app"> & ...
- Android---63---Android中的动画效果
Android中有四种动画效果: AlphaAnimation:透明度动画效果 ScaleAnimation:缩放动画效果 TranslateAnimation:位移动画效果 RotateAnimat ...
- CSS3中的动画效果-------Day72
还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...
- Vue中的动画效果
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...
随机推荐
- yii 权限分级式访问控制的实现（非RBAC法）——已验证
验证和授权——官方文档: http://www.yiichina.com/guide/topics.auth http://www.yiiframework.com/doc/guide/1.1/zh_ ...
- RGB同步信号 DCLK／HS／VS／DE信号介绍
来源: http://www.cnblogs.com/general001/articles/3721683.html 只要是数字信号处理电路,就必须有时钟信号.在液晶面板中,像素时钟是一个非常重要 ...
- Hyperic Agent 安装配置报 - No token file found, waiting for Agent to initialize
本人经过跟VMWare 支持的多方努力,问题终于得到解决,方案如下: * Stop the agent Windows service. * Make sure all the agent proce ...
- IAR右键无法跳转到定义 的解决方法
用IAR编译程序,有时候编译通过了,但是右键无法GO TO Definition 解决方法有两个: 第一.Tools -> Option -> Project 把Generate br ...
- 再谈内存管理与ARC运行机制（一）
内存管理 内存在Objective-C开发中是一种相对稀缺的资源,拿Iphone4为例,它的内存只有512mb,所以妥善的处理好所创造,所使用的每个对象与变量都将成为一个问题.在ARC出现以前,同大部 ...
- 跟我一步一步开发自己的Openfire插件
http://www.blogjava.net/hoojo/archive/2013/03/07/396146.html 跟我一步一步开发自己的Openfire插件 这篇是简单插件开发,下篇聊天记录插 ...
- uva 167 - The Sultan's Successors（典型的八皇后问题）
这道题是典型的八皇后问题,刘汝佳书上有具体的解说. 代码的实现例如以下: #include <stdio.h> #include <string.h> #include < ...
- 错误ERROR datanode.DataNode (DataXceiver.java：run(278)) - hadoop07：50010DataXceiver error processing unknown operation src：127.0.0.136479 dst：127.0.0.150010
原因: Ambari 每分钟会向datanode发送"ping"连接一下去确保datanode是正常工作的.否则它会触发alert.但是datanode并没有处理空内容的逻辑,所以 ...
- 编写跨平台代码之memory alignment
编写网络包(存储在堆上)转换程序时,在hp-ux机器上运行时会遇到 si_code: 1 - BUS_ADRALN - Invalid address alignment. Please refer ...
- 超过2T，磁盘分区
MBR:MBR分区表(即主引导记录)大家都很熟悉.所支持的最大卷:2T,而且对分区有限制:最多4个主分区或3个主分区加一个扩展分区 GPT: GPT(即GUID分区表).是源自EFI标准的一种较新的磁 ...