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-正方体合成

最新文章

热门文章
