CSS 动画: 向左下,向右下,向右上,向左上打开_html/css_WEB-ITnose

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

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

欢迎大家传播与分享.

融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.