zoukankan html css js c++ java
CSS3动画制作

rotate 绕中心旋转
fadeInPendingFadeOutUp 先渐现，停留2s，再向上滑动并逐渐消失
fadeInUp2D 向上滑动并渐现，因Animate.css的fadeInUp不支持iphone6 plus，自己用2d重写
效果如下：

详细代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSS3动画制作</title>
    <style>
                .container {
                    width: 200px;
                    margin: 0 auto;
                }

                .redbox {
                    width: 100px;
                    height: 100px;
                    background-color: red;
                    margin: 50px auto;
                }

                .bluebox {
                    width: 100px;
                    height: 100px;
                    background-color: red;
                    margin: 50px auto;
                }

                .orangebox {
                    width: 100px;
                    height: 100px;
                    background-color: orange;
                    margin: 50px auto;
                }
                /*!
            2015.03.21 Nelson Kuang
        */

                .animated {
                    -webkit-animation-duration: 1s;
                    animation-duration: 1s;
                    -webkit-animation-fill-mode: both;
                    animation-fill-mode: both;
                }

                    .animated.infinite {
                        -webkit-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                /*
            @creator: Nelson Kuang
            @name: rotate 绕中心旋转
            @usage: <div class="rotate infinite animated">Example</div>
            */
                @-webkit-keyframes rotate {
                    from {
                        -webkit-transform-origin: center;
                        transform-origin: center;
                        -webkit-transform: rotate(-360deg);
                        transform: rotate(-360deg);
                    }

                    to {
                        -webkit-transform-origin: center;
                        transform-origin: center;
                        -webkit-transform: rotate(0deg);
                        transform: rotate(0deg);
                    }
                }

                @keyframes rotate {
                    from {
                        -webkit-transform-origin: center;
                        transform-origin: center;
                        -webkit-transform: rotate(-360deg);
                        transform: rotate(-360deg);
                    }

                    to {
                        -webkit-transform-origin: center;
                        transform-origin: center;
                        -webkit-transform: rotate(0deg);
                        transform: rotate(0deg);
                    }
                }

                .animated.rotate {
                    -webkit-animation-name: rotate;
                    animation-name: rotate;
                    -webkit-animation-timing-function: linear;
                    animation-timing-function: linear;
                    -webkit-animation-duration: 4s;
                    animation-duration: 4s;
                }

                /*
            @creator: Nelson Kuang
            @name: fadeInPendingFadeOutUp 先渐现，停留2s，再向上滑动并逐渐消失
            @usage:可单独使用keyframes或者与Animate.css结合使用 如：<div class="animated infinite fadeInPendingFadeOutUp">Example</div>
            */
                @-webkit-keyframes fadeInPendingFadeOutUp {
                    0% {
                        opacity: 0;
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                    }

                    25% {
                        opacity: 1;
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                    }

                    75% {
                        /*pending*/
                        opacity: 1;
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                    }

                    100% {
                        opacity: 0;
                        -webkit-transform: translate3d(0, -100%, 0);
                        transform: translate3d(0, -100%, 0);
                    }
                }

                @keyframes fadeInPendingFadeOutUp {
                    0% {
                        opacity: 0;
                    }

                    25% {
                        opacity: 1;
                    }

                    75% {
                        /*pending*/
                    }

                    100% {
                        opacity: 0;
                        -webkit-transform: translate3d(0, -100%, 0);
                        transform: translate3d(0, -100%, 0);
                    }
                }

                .animated.fadeInPendingFadeOutUp {
                    -webkit-animation-duration: 4s;
                    animation-duration: 4s;
                    -webkit-animation-name: fadeInPendingFadeOutUp;
                    animation-name: fadeInPendingFadeOutUp;
                }
                /*
            @creator: Nelson Kuang
            @name: fadeInUp2D 向上滑动并渐现， 因Animate.css的fadeInUp不支持iphone6 plus，自己用2d重写
            @usage:可单独使用keyframes或者与Animate.css结合使用 如：<div class="animated infinite fadeInUp2D">Example</div>
            */
                @-webkit-keyframes fadeInUp2D {
                    from {
                        opacity: 0;
                        -webkit-transform: translateY(100%);
                        transform: translateY(100%);
                    }

                    to {
                        opacity: 1;
                        -webkit-transform: translateY(0);
                        transform: translateY(0);
                    }
                }

                @keyframes fadeInUp2D {
                    from {
                        opacity: 0;
                        -webkit-transform: translateY(100%);
                        transform: translateY(100%);
                    }

                    to {
                        opacity: 1;
                        -webkit-transform: translateY(0);
                        transform: translateY(0);
                    }
                }

                .animated.fadeInUp2D {
                    -webkit-animation-duration: 4s;
                    animation-duration: 4s;
                    -webkit-animation-name: fadeInUp2D;
                    animation-name: fadeInUp2D;
                }
    </style>
</head>
<body>
    <div class="container">
        <div class="redbox infinite rotate"></div>
        <div class="bluebox fadeInPendingFadeOutUp"></div>
        <div class="orangebox fadeInUp2D"></div>
    </div>
    <script>
        var objs = document.querySelectorAll(".container>div");
        for (var k = 0, length = objs.length; k < length; k++) {
            objs[k].onclick = function () {
                var This = this; removeClass(This, 'animated'); setTimeout(function () { addClass(This, 'animated'); }, 100);
            }
        }
        function hasClass(obj, cls) {
            return obj.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));
        }
        function addClass(obj, cls) {
            if (!hasClass(obj, cls)) {
                obj.className = obj.className.replace(/(^s*)|(s*$)/g, "");
                obj.className += " " + cls;
            }
        }
        function removeClass(obj, cls) {
            if (hasClass(obj, cls)) {
                var reg = new RegExp('(\s|^)' + cls + '(\s|$)');
                obj.className = obj.className.replace(reg, ' ');
            }
        }

    </script>
</body>
</html>
查看全文
相关阅读:
SpringCloud项目中使用Nacos作为配置中心
 SpringCloud项目中使用Nacos作为注册中心
 idea创建maven多模块Spring Boot项目
 Java代码中对IP进行白名单验证
 idea配置jdk
win10配置jdk1.8环境变量
 shell 提示符样式设置
 整数转换成中文读法的字符串
 比较三段式软件版本号大小
 Windows7安装 nginx+php 后访问.php文件出现 “No input file specified.” 的解决办法
原文地址：https://www.cnblogs.com/fastmover/p/4977358.html