[分享]css3怎样让div动起来

CSS3是前端开发中不可或缺的一部分，其中最让人感兴趣的就是如何让div动起来。下面我们来看看CSS3的一些属性和方法。div{ :absolute; left:0; top:0; width:100...

CSS3是前端开发中不可或缺的一部分，其中最让人感兴趣的就是如何让div动起来。下面我们来看看CSS3的一些属性和方法。

div{
    position:absolute;
    left:0;
    top:0;
    width:100px;
    height:100px;
    background-color:red;
    transition:2s;
}
div:hover{
    left:200px;
    top:200px;
} 

CSS3的transition属性可以让元素在一定时间内完成过渡效果。在上面的代码中，当鼠标悬停在div上时，它将在从左上角移动到（200px，200px）坐标的过程中，花费2秒钟完成这个过渡过程。

我们也可以使用CSS3中的animation属性，来制作更为复杂的动画效果。

div{
    position:absolute;
    left:0;
    top:0;
    width:100px;
    height:100px;
    background-color:red;
    animation:myanimation 3s infinite;
}
@keyframes myanimation{
    0%{left:0; top:0; background-color:red;}
    25%{left:200px; top:0; background-color:blue;}
    50%{left:200px; top:200px; background-color:green;}
    75%{left:0; top:200px; background-color:yellow;}
    100%{left:0; top:0; background-color:red;}
} 

在上面的代码中，我们使用了CSS3的@keyframes关键字，定义了一个包含五个阶段的动画，从左上角移动到右下角，同时变换颜色。

总之，CSS3让前端开发人员在实现动画效果上更加方便，并且可以利用CSS3上升到新的设计层次。