制作动画
程序员文章站
2024-01-17 22:10:58
...
制作一个简单的动画
其实制作一个动画很简单，动画的原理，就是让许多图片动起来，一张接着一张的速度播放起来，我们看的动画的原理就是一秒钟播放24张图片，连贯起来所形成的图像就是动画，今天小编在这里给大家制作一个简单的动画，希望对大家动画的制作有所启发。
html代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动画</title>
<link rel="stylesheet" type="text/css" href="css3.css">
</head>
<body>
<div>
<img src="timg.jpg" width="200px" height="200px">
</div>
</body>
</html>
css代码如下：
div{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: anim 5s infinite alternate;
-webkit-animation: anim 5s infinite alternate;
}
@keyframes anim{
0% {
left:0px;
top:0px
}
25% {
left:200;
top:0px
}
50% {
left:200px;
top: 200px
}
75% {
left:0px;
top:200px}
100% {
left:0px;
top:0px
}
}
@-webkit-keyframes anim{
0% {
left:0px;
top:0px
}
25% {
left:200;
top:0px
}
50% {
left:200px;
top: 200px
}
75% {
left:0px;
top:200px}
100% {
left:0px;
top:0px
}
}
代码很简单，可以看到有许多的代码几乎一模一样，主要是因为每个浏览器对动画可能不兼容，所以才要对浏览器进行识别， -webkit-就是对chrome浏览器的识别方式。不兼容的浏览器，可能你的动画会动不起来。
好了，以上就是这篇文章的全部内容，欢迎大家评论交流。