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


 

这里我只放两个效果了.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);

}

to {

transform: rotate(-120deg);

}


 

}


 

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

from {

transform: rotate(0deg);

}

to {

transform: rotate(120deg);

}

}


 

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

from {

transform: rotate(0deg);

}

to {

transform: rotate(120deg);

}

}


 

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

from {

transform: rotate(0deg);

}

to {

transform: rotate(-120deg);

}

}


 

 


 

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


 

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