css3动画（animation）效果3-正方体合成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转的星球</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
list-style: none;
}
.box{
height: 100px;
width: 100px;
perspective: 500px;
margin: 50px 0 0 50px;
}
.list{
position: relative;
height: 100px;
width: 100px;
background-color: blue;
transform-style: preserve-3d;
transform-origin: 0 0 0;
animation: rotate 1s 10s 3 both linear;
}
.in{
position: absolute;
height: 100px;
width: 100px;
}
.list .in:nth-child(6){
background-color: pink;
transform-origin: top;
animation: in6 2s both;
}
.list .in:nth-child(5){
background-color: lightgreen;
transform-origin: right;
animation: in5 2s 2s both;
}
.list .in:nth-child(4){
background-color: lightblue;
transform-origin: bottom;
animation: in4 2s 4s both;
}
.list .in:nth-child(3){
background-color: lightcoral;
transform-origin: left;
animation: in3 2s 6s both;
}
.list .in:nth-child(2){
background-color: lightcyan;
animation: in2 2s 8s both;
}
.list .in:nth-child(1){background-color: lightsalmon;}
.box:hover .list{animation-play-state: paused;}
.box:hover .in{animation-play-state: paused;}
@keyframes in6{100%{transform: rotateX(90deg);}}
@keyframes in5{100%{transform: rotateY(90deg);}}
@keyframes in4{100%{transform: rotateX(-90deg);}}
@keyframes in3{100%{transform: rotateY(-90deg);}}
@keyframes in2{100%{transform: translateZ(100px);}}
@keyframes rotate{100%{transform: rotate3d(1,1,1,360deg);}}
</style>
</head>
<body>
<div class="box">
<ul class="list" id="list">
<li class="in"></li>
<li class="in"></li>
<li class="in"></li>
<li class="in"></li>
<li class="in"></li>
<li class="in"></li>
</ul>
</div>
<script type="text/javascript">
list.addEventListener('animationend',function(e){
e = e || event;
var target = e.target || e.srcElement;
if(target.nodeName == 'UL'){
list.style.animationName = 'none';
var children = list.getElementsByTagName('li');
for(var i = 0; i < children.length;i++){
children[i].style.animationName = 'none';
}
setTimeout(function(){
list.style.animationName = 'rotate';
var children = list.getElementsByTagName('li');
for(var i = 0; i < children.length;i++){
children[i].style.animationName = 'in' + (i+1);
}
},100);
}
},false);
</script>
<strong>【简要介绍】</strong>
<p>该效果主要通过设置计算后的延迟时间来达到正方体的各个边顺序动画的效果。一次动画结束后，通过触发animationend事件重置animation-name来实现重复动画的效果</p>
</body>
</html>
效果图：
原链接：https://www.cnblogs.com/xiaohuochai/p/5419236.html
css3动画（animation）效果3-正方体合成的更多相关文章
- 前端CSS3动画animation用法
前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
- CSS3 动画animation
关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- CSS3 动画 animation和@keyframes
CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...
- CSS3动画animation认识，animate.css的使用
CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
- css3动画animation
动画:animation animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...
- CSS3 动画Animation的8大属性
animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...
- css3动画-animation
animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...
- 最新的css3动画按钮效果
效果演示 插件下载
- 纯CSS3动画按钮效果
在线演示 本地下载
随机推荐
- Linux Debian 下LNMP服务器——nginx+mysql+php环境搭建及配置
昨天刚给公司服务器装了LNMP服务器环境,在这里简单记录一下过程备忘. 这里我在安装的时候是用的Dotdeb源,仅供参考. 1.导入Dotdeb源,据说Dotdeb源里的软件版本比较新. 在向源中导入 ...
- 如何debug？(转载)
本文属于转载,原文地址如下: https://blog.csdn.net/zhao4zhong1/article/details/53078924 一.码畜:靠编译器帮自己查语法错误 消灭笔误:编写适 ...
- NPC问题及其解决方法（回溯法、动态规划、贪心法、深度优先遍历）
NP问题(Non-deterministic Polynomial ):多项式复杂程度的非确定性问题,这些问题无法根据公式直接地计算出来.比如,找大质数的问题(有没有一个公式,你一套公式,就可以一步步 ...
- SpringBoot全局异常的捕获设置
1.新建立一个捕获异常的实体类 如:LeeExceptionHandler package com.leecx.exception; import javax.servlet.http.HttpSer ...
- 解决VirtualBox 上的XP 关机时重启 ， 启动时蓝屏 ，点击电源选项蓝屏
三个问题一次性解决. 启动时的蓝屏显示错误信息是: STOP 0x000000CE (...) DRIVER_UNLOADED_WITHOUT_CANCELLING_PENDING_OPERATION ...
- CentOS-yum基本使用
CentOS: yum URL: ftp://172.16.0.1/pub/ YUM: yellow dog, Yellowdog Update Modifier yum repository: yu ...
- oracle 环境变量（中文显示乱码）
NLS_LANGSIMPLIFIED CHINESE_CHINA.ZHS16GBK
- Mysql建表的时候创建索引
创建表时可以直接创建索引,这种方式最简单.方便.其基本形式如下: CREATE TABLE 表名( 属性名 数据类型[完整性约束条件], 属性名 数据类型[完整性约束条件], ...... 属性名 数 ...
- Python Socket实现简单的聊天室
通过参考其他牛人的文章和代码, 再根据自己的理解总结得出, 说明已经加在注释中, FYI 主要参考文章: http://blog.csdn.net/dk_zhe/article/details/3 ...
- windows server2012安装mysql时一直停留在start server的解决方法
安装的时候,starting server 卡住 原因分析 这个问题小编安装mysql时也碰到过,出现这个问题是my.ini文件没有复制成功了,我们只要在mysql安装目录把把目录中的备份的my-sm ...