CSS 动画: 向左下,向右下,向右上,向左上打开

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-01 09:05:15.0

我们继续动画的实例的,主要还是熟悉动画的相关属性,免得忘记相关的知识点.我们来实现向左下,向右下,向右上,向左上打开,这四个动画.


这里我只放两个效果了.OK,还是和往常一样,上代码.

首先是HTML结构代码,两个BOX,一个外BOX,一个内BOX,外BOX有边框,内BOX是背景为绿色


代码名称

 <div class="outer_box"> 
   <div class="inner_box"></div>
 </div>


 BOX的相关CSS代码. 这里记住内部BOX的transform-origin,这个属性来设置动画的变换原始点. 其实这四个动画,主要是这个点的控制,然后是角度的变换.


代码名称

.outer_box {

     width: 200px;

    height: 200px;

    border: #bbb 5px solid;

    margin: 200px auto;

}

.inner_box {

    background-color: #44b549;

    width: 100%;

    height: 100%;

    animation: open_top_left 2s infinite;

    transform-origin: 0 0;

}


好了,我们来贴上动画的代码,其实知道动画属性的,下面的代码就没什么可解释了.

代码名称

@keyframes open_down_left { /*原始点 0 100% */


    from {

        transform: rotate(0deg, 0, 0);

    }

    to {

        transform: rotate(-120deg, 0, 0);

    }


}


@keyframes open_down_right { /* 原始点: 100% 100%*/

    from {

        transform: rotate(0deg, 0, 0);

    }

    to {

        transform: rotate(120deg, 0, 0);

    }

}


@keyframes open_top_left { /* 原始点 0 0*/

    from {

        transform: rotate(0deg, 0, 0);

    }

    to {

        transform: rotate(120deg, 0, 0);

    }

}


@keyframes open_top_right { /*原始点 100% 0*/

    from {

        transform: rotate(0deg, 0, 0);

    }

    to {

        transform: rotate(-120deg, 0, 0);

    }

}




代码里我标注了原始点,只要把这个原始点改变到内BOX里,然后将动画名称修改一下即可查看这四个动画.


好了,这四个动画的例子就是这样了,需要添油加醋的,可以尝试修改其中的代码.


android项目没有android.jar这个依赖包的解决办法
|
CSS动画实例: 仍扔炸弹式效果