我们继续动画的实例的,主要还是熟悉动画的相关属性,免得忘记相关的知识点.我们来实现向左下,向右下,向右上,向左上打开,这四个动画.
这里我只放两个效果了.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里,然后将动画名称修改一下即可查看这四个动画.
好了,这四个动画的例子就是这样了,需要添油加醋的,可以尝试修改其中的代码.
融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.
