Home >Web Front-end >HTML Tutorial >CSS 动画: 向左下,向右下,向右上,向左上打开_html/css_WEB-ITnose
CSS 动画: 向左下,向右下,向右上,向左上打开_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:58:052078browse
我们继续动画的实例的,主要还是熟悉动画的相关属性,免得忘记相关的知识点.我们来实现向左下,向右下,向右上,向左上打开,这四个动画.
这里我只放两个效果了.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里,然后将动画名称修改一下即可查看这四个动画.
好了,这四个动画的例子就是这样了,需要添油加醋的,可以尝试修改其中的代码.
编程的人正在在线培训
"前端编程开发","后端开发","移动开发"等,
需要学习的可以加入群或者微信留言
原创内容,转载请注明出处.
公众微信号:bianchengderen
QQ群: 186659233
欢迎大家传播与分享.
融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.