<!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-正方体合成的更多相关文章

  1. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  2. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  3. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  4. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  5. CSS3动画animation认识，animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  6. css3动画animation

    动画:animation   animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...

  7. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

  8. css3动画-animation

    animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...

  9. 最新的css3动画按钮效果

    效果演示     插件下载

  10. 纯CSS3动画按钮效果

    在线演示 本地下载

随机推荐

  1. C# Attribute的用法

         {                   {                            Attribute[] atts = Attribute.GetCustomAttribut ...

  2. linux shell 脚本攻略学习 -- head命令详解, tail命令详解

    当要查看上千行的大文件时,我们可不会用cat命令把整个文件内容给打印出来,相反,我们可能只需要看文件的一小部分地内容(例如文件的前十行和后十行),我们也有可能需要打印出来前n行或后n行,也有可能打印除 ...

  3. 【LA4043 训练指南】蚂蚁 【二分图最佳完美匹配，费用流】

    题意 给出n个白点和n个黑点的坐标,要求用n条不相交的线段把他们连接起来,其中每条线段恰好连接一个白点和一个黑点,每个点恰好连接一条线段. 分析 结点分黑白,很容易想到二分图.其中每个白点对应一个X结 ...

  4. SpringBoot整合SpringData和Mysql数据库

    1.新建maven项目(具体的新建过程就不细说了) 2.添加maven依赖,也就是在pom.xml文件添加项目的依赖jar包: <project xmlns="http://maven ...

  5. EasyBuy项目总结_20180409

    一.项目技术点 1.熟练使用jsp及el和jstl表达式 el: $() jstl: 1.导包; 2.声明<%@ taglib uri=" " preffix="c ...

  6. 117. Populating Next Right Pointers in Each Node II 计算右边的附属节点

    ［抄题］: Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNod ...

  7. linux系统文件属性详解

    一.文件信息 当创建一个文件的时候,系统保存了有关该文件的全部信息,包括: 文件的位置: 文件类型: 文件长度: 哪位用户拥有该文件,哪些用户可以访问该文件: 硬连接计数: 文件的修改时间: 文件的权 ...

  8. Windows下redis的安装与使用

    Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  9. 178. Rank Scores - database - 178. Rank Scores （Oracle）

    题目链接    https://leetcode.com/problems/rank-scores/description/ 题意:对所有的分数按照降序进行排序,查询出分数和排名,排名相同的输出相同名 ...

  10. HUST软测1504班第2周作业成绩：WordCount

    说明 本次公布的成绩为第2周个人作业WordCount的结果: 第2周个人作业:WordCount 如果同学对作业结果存在异议,可以: 在毕博平台讨论区的第2周作业第在线答疑区发帖申诉. 或直接在博客 ...