Html+CSS3 动画简单入门

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 Animation</title>
<style type="text/css">
@keyframes myani
{
from {
    background: blue;
    width:300px;
    height:0;
    left:0;
    top:0;
    }
to {
    background: yellow;
    width:0;
    height:300px;
    left:300px;
    top:300px;
    }
}
div{
    width:300px;
    height:0;
    background-color:blue;
    animation: myani 5s;
    animation-iteration-count:infinite;
    position:relative;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

课后作业:

1.复制上述代码,预览查看效果。

2.读懂上述代码。

猜你喜欢

转载自www.cnblogs.com/exesoft/p/12957809.html