使用HTML+css制作简易动画-优快云博客

本文介绍了如何结合HTML和CSS创建简单的动画效果。通过实例展示了从设计到实现的过程，包括关键帧动画、过渡效果等技术的应用，帮助读者理解并掌握基本的网页动效制作。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title>
<style type="text/css">
@keyframes mymovie{
0%{
left:0px;
top:0px;
}
20%{
left:200px;
top:0px;
}
70%{
left:200px;
top:200;
}
100%{
left:400px;
top:200px
}
}
body{
margin:0;
}
div{
  position:absolute;/*将对象从文档流中拖出*/
  padding:10px;/*设置div四个边框的边白为10px*/
  height:100px;
  width:100px;
  border:1px solid #f00;
  animation-name:mymovie;
  animation-duration:10s;
}
@-moz-keyfrmes mymovie{
from{
margin-left:85%;
width:100px;
height:115px;
}
50%{
margin-left:40%;
width:200px;
height:230px;
}
to{
margin-left:0%;
width:100px;
height:115px;
}
}
@-webkit-keyframes mymovie {
      from {
        margin-left:85%;
        width:100px;
 height: 115px;
      }  
       50% {
        margin-left:40%;
        width:200px;
 height: 230px;
      }
      to {
  margin-left:0%;
        width:100px;
 height: 115px;
      }
}
    @keyframes mymovie {
      from {
        margin-left:85%;
        width:100px;
 height: 115px;
      }  
50% {
        margin-left:40%;
        width:200px;
 height: 230px;
      }
      to {
            margin-left:0%;
        width:100px;
 height: 115px;
      }
}
    img {
    -moz-animation: mymovie 3s infinite alternate;
      -webkit-animation: mymovie 3s infinite alternate;
      animation: mymovie 3s infinite alternate;
    }
    </style>
</head>
<body>
<div><img src="C:\Users\小强\Desktop\练习\image\charlesp.gif" alt="公仔画"></div>
<div>漂移的div</div>
</body>
</html>