动画

来源：互联网发布：办公室网络限制玩游戏编辑：程序博客网时间：2024/04/30 19:54

imgAnimateArr

var imgAnimateArr = [            "bounce" ,"flash" ,"pulse" ,"rubberBand" ,"shake" ,"swing" , "tada" ,"wobble" ,"jello" ,"bounceIn" ,            "bounceInDown" ,"bounceInLeft" ,"bounceInRight" ,"bounceInUp" ,"bounceOut" , "bounceOutDown" ,            "bounceOutLeft" ,"bounceOutRight" ,"bounceOutUp" , "fadeIn" ,"fadeInDown" ,"fadeInDownBig" ,"fadeInLeft" ,            "fadeInLeftBig" , "fadeInRight" ,"fadeInRightBig" ,"fadeInUp" ,"fadeInUpBig" ,"fadeOut", "fadeOutDown" ,            "fadeOutDownBig" ,"fadeOutLeft" ,"fadeOutLeftBig" ,"fadeOutRight" ,"fadeOutRightBig" ,"fadeOutUp" ,            "fadeOutUpBig" , "flipInX" ,"flipInY" ,"flipOutX" ,"flipOutY" ,"lightSpeedIn" , "lightSpeedOut" ,            "rotateIn" ,"rotateInDownLeft" ,"rotateInDownRight" , "rotateInUpLeft" ,"rotateInUpRight" ,"rotateOut" ,            "rotateOutDownLeft" , "rotateOutDownRight" ,"rotateOutUpLeft" ,"rotateOutUpRight" ,"hinge" , "zoomInUp" ,            "zoomOut" ,"zoomOutDown" ,"zoomOutLeft" ,"zoomOutRight" , "zoomOutUp" ,"slideInDown" ,"slideInLeft" ,             "slideInRight" ,"slideInUp" ,"slideOutDown" ,"slideOutLeft" ,"slideOutRight" ,"slideOutUp"];

animate#left1:hover{    animation: flipOutX 2s;}<div id="left1" class="animated bounce">    <img src="img/visit.png"/></div>

过渡动画

/*transition是一个符合属性，能填的值有四个 transition-property :过渡动画的属性 all; transition-duration :持续时间 s; transition-timing-function :设置动画速度曲线； linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease   规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in    规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out   规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out    规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)） transition-delay :动画延迟时间 * *//*transition: all 3s ease-in-out    1s;*/#div1{        padding-top: 350px;        margin: 0 auto;        width: 200px;        height: 200px;        background: red;        transition: all 3s cubic-bezier(0,2.06,1,1);    }    #div1:hover{        width: 400px;        border-radius: 100px;        transform: rotate(180deg);        transform: translate();        transform: scale();        transform: skew(30deg);    }</style></head><body><div id="div1"></div></body>

关键帧动画

<style type="text/css">            /*1.写帧动画        @keyframes是帧动画的关键词，后面加上动画的名字         from和to代表了动画过渡时，设置的关键点  * */            @keyframes move{                from{                    width: 100px;                    height: 100px;                    background: yellow;                }                to{                    width: 500px;                    height: 200px;                    background: green;                }            }            @keyframes test{                0%{                    background: forestgreen;                }                25%{                    transform: translate(300px,0);                    background: gold;                   }                50%{                    transform: translate(300px,300px);                    background: firebrick;                                              }                75%{                    transform: translate(0,300px);                    background: forestgreen;                }            }            div{                width: 100px;                height: 100px;                background: red;                position: relative;                left: 0;                top: 0;                animation: test 10s ease infinite;                /*使用帧动画 */                /*动画名*/                /*animation-name: move;*/                /*持续时间*/                /*animation-duration: 3s;*/                /*速度曲线*/                /*animation-timing-function: ease-in-out;*/                /*动画延迟*/                /*animation-delay: 0s;*/                /* infinite;动画循环次数，infinite无限*/                /*animation-iteration-count: infinite;*/                /*先写动画名，持续时间 速度 次数*/            }                   </style>    </head>    <body>        <div></div>         </body>

旋转

div{width: 200px;    height: 200px;    border-radius: 200px;    background: url(../03练习/03老张律师网/img/002.jpg);    background-position: 100% 100%;    animation: flood 3s linear infinite;}@keyframes flood{    from{        transform: rotate(0);    }    to{        transform: rotate(360deg);    }}

立方体

<style type="text/css">    *{        margin: 0;        padding: 0;    }    body{        transform-style: preserve-3d;    }    /*     -webkit- 谷歌浏览器，使用的是webkit内核     -o- 欧朋浏览器     -ms-IE浏览器     -moz-火狐浏览器     解决浏览器兼容的一种方式，加前缀     * */    #main{        width: 200px;        height: 200px;        margin: 100px auto;        background: firebrick;        position: relative;        top: 0;        left: 0;        /*在父级打开3D效果*/        transform-style: preserve-3d;        transition: all 5s linear ;    }    #main div{        width: 200px;        height: 200px;        text-align: center;        position: absolute;        line-height: 200px;        font-size: 40px;        left: 0;        right: 0;                   }    /*@key +tab 键盘*/    #main div:nth-child(1){        background: red;        transform: translateZ(100px);    }    #main div:nth-child(2){        transform: rotateX(-90deg)          translateZ(100px);        background: green;                  }    #main div:nth-child(3){        transform: rotateX(-180deg)         translateZ(100px);        background: palegoldenrod;                  }    #main div:nth-child(4){        translateZ(100px);        background: palegoldenrod;                  }    #main div:nth-child(5){        transform: rotateY(-90deg)         translateZ(100px);        background: salmon;                 }    #main div:nth-child(6){        transform: rotateY(90deg)         translateZ(100px);        background: salmon;                 }    #main:hover{        transform: rotateX(360deg)         rotateY(360deg);    }</style></head><body><div id="main">    <div>第一个面</div>    <div>第二个面</div>    <div>第三个面</div>    <div>第四个面</div>    <div>第五个面</div>    <div>第六个面</div></div></body>

1 0