CSS3 动画实例

作者: 哈哈腾飞 | 来源:发表于2017-06-30 09:16 被阅读0次

微信小程序Animation动画的使用
CSS3 动画实例
网页高级知识点（三）
07day
08_dayCSS动画
CSS3 动画
CSS3 动画
css3动画
纯CSS3绘制的逼真，呆萌，超酷的CSS3动画
关于js动画和css3动画的差异性你了解吗？请简单谈一下

现在虽然不是所有的浏览器都兼容css3属性，一把做兼容的时候加上浏览器内核的前缀就可以了，CSS3节省了大量的时间和是代码整洁，同时也减少了许多UI方面的麻烦，如：border-radius设置圆角，box-shadow 设置盒阴影等。下面是简单一个绚丽的CSS3动画实例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        #wrapper{
            margin: 100px auto;
            width: 100px;
            height: 100px;

            /* 设置视野的距离，需要给变形元素的祖先元素添加 */
            perspective: 500px;

            /* 设置视点的位置 */
            perspective-origin: 200px -20px;
        }
        #cubic{
            position: relative;
            width: 100px;
            height: 100px;

            /* 给视图添加3d效果 */
            animation: round 1s 5s infinite linear forwards;

            /* 给视图创造3d空间 */
            transform-style: preserve-3d;
        }
        
        .item{
            font-size: 80px;
            text-align: center;
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: lawngreen;
            border: 1px solid black;
            position: absolute;
            opacity: 0.5;
        }
        #item6{
            animation: a6 1s linear forwards;
            transform-origin: bottom;
        }
        #item5{
            animation: a5 1s 1s linear forwards;
            transform-origin: left;
        }
        #item4{
            animation: a4 1s 2s linear forwards;
            transform-origin: right;
        }
        #item3{
            animation: a3 1s 3s linear forwards;
            transform-origin: top;
        }
        #item2{
            animation: a2 1s 4s linear forwards;
            
        }
        @keyframes a6{
            100%{
                transform: rotateX(-90deg);
            }
        }
        @keyframes a5{
            100%{
                transform: rotateY(-90deg);
            }
        }
        @keyframes a4{
            100%{
                transform: rotateY(90deg);
            }
        }
        @keyframes a3{
            100%{
                transform: rotateX(90deg);
            }
        }
        
        @keyframes a2{
            100%{
                transform: translateZ(100px);
            }
        }
        @keyframes round{
            100%{
                transform: rotate3d(1,1,1,360deg);
            }
        }
    </style>

    <body>
        <div id="wrapper">
            <div id="cubic">
                <div id="item1" class="item">
                    1
                </div>
                <div id="item2" class="item">
                    2
                </div>
                <div id="item3" class="item">
                    3
                </div>
                <div id="item4" class="item">
                    4
                </div>
                <div id="item5" class="item">
                    5
                </div>
                <div id="item6" class="item">
                    6
                </div>
            </div>
        </div>
    </body>

</html>