当前位置:首页 » HTML/CSS

css样式-动画效果

2016-03-06 17:59 本站整理 浏览(5)

不用js代码实现动画效果
只需要css代码简单实现
代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="styletransition.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>动画效果展示</div>
    <img src="img/get2.jpg">
</body>
</html>
/*动画效果展示*/
div{
    width:100px;
    height:100px;
    background-color: red;
    position: relative;
    animation: anim 5s infinite alternate;
    -moz-animation: anim 5s infinite alternate;
}
@keyframes anim{
    0%{background: red; left:0; top: 0}
    25%{background: blue; left:200px; top: 0}
    50%{background: pink; left:200px; top: 200px}
    75%{background: green; left:0px; top: 200px}
    100%{background: red; left:0px; top:0px}
}
@-moz-keyframes anim
{
    0%{background: red; left:0; top: 0}
    25%{background: blue; left:200px; top: 0}
    50%{background: pink; left:200px; top: 200px}
    75%{background: green; left:0px; top: 200px}
    100%{background: red; left:0px; top:0px}
}

/*过渡效果展示*/
img{
     width:100px;
     height:100px;
     background-color: blue;
     transition: width 2s,height 2s, transform 1s;
     -moz-transition: width 2s,height 2s, transform 1s;
    transition-delay: 1s;
 }
img:hover{
    height:200px;
    width: 200px;
    transform: rotate(360deg);
    -moz-transform: rotate(360deg);
}
效果图: