给你做 第一个，用的是css3和js实现的。
下面的3个都可以用js实现，如果要做的好看一点的话，可以用jquery或者其他的组件
<!DOCTYPE html><html>
<head>
<style>
.move
{
width:100px
height:100px
background:red
position:relative
animation-name:myfirst
animation-duration:5s
animation-timing-function:linear
animation-delay:0
animation-iteration-count:infinite
animation-direction:alternate
animation-play-state:paused
/* Firefox: */
-moz-animation-name:myfirst
-moz-animation-duration:5s
-moz-animation-timing-function:linear
-moz-animation-delay:0
-moz-animation-iteration-count:infinite
-moz-animation-direction:alternate
-moz-animation-play-state:paused
/* Safari and Chrome: */
-webkit-animation-name:myfirst
-webkit-animation-duration:5s
-webkit-animation-timing-function:linear
-webkit-animation-delay:0
-webkit-animation-iteration-count:infinite
-webkit-animation-direction:alternate
-webkit-animation-play-state:paused
/* Opera: */
-o-animation-name:myfirst
-o-animation-duration:5s
-o-animation-timing-function:linear
-o-animation-delay:0
-o-animation-iteration-count:infinite
-o-animation-direction:alternate
-o-animation-play-state:paused
}
@keyframes myfirst
{
0% {background:red left:0px top:0px}
25% {background:yellow left:200px top:0px}
50% {background:blue left:200px top:200px}
75% {background:green left:0px top:200px}
100% {background:red left:0px top:0px}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red left:0px top:0px}
25% {background:yellow left:200px top:0px}
50% {background:blue left:200px top:200px}
75% {background:green left:0px top:200px}
100% {background:red left:0px top:0px}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red left:0px top:0px}
25% {background:yellow left:200px top:0px}
50% {background:blue left:200px top:200px}
75% {background:green left:0px top:200px}
100% {background:red left:0px top:0px}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red left:0px top:0px}
25% {background:yellow left:200px top:0px}
50% {background:blue left:200px top:200px}
75% {background:green left:0px top:200px}
100% {background:red left:0px top:0px}
}
.c{
position: absolute
width:300px
height: 300px
border:solid 1px red
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div class="c">
<div class="move" id="move"></div>
</div>
</body>
<script>
window.onload = function(){
document.getElementById("move").onclick = function(){
this.style.animationPlayState = "running"
}
}
</script>
</html>
对于参加杭州Web前端培训班的人来说，他们的课程安排是从基础到进阶，并由专业的老师引导教学。在具备一定的理论基础之后，还需要学习前端框架，目的是减少重复的劳动，提高工作效率并增加安全性，而这也是很多企业在面试过程中经常提问的知识点。今天就给大家介绍一下Web前端三大主流框架。目前比较流行的前端三大框架是Angular、React、Vue，三者各有所长。
1、Angular
Angular是一个JavaScript框架，最为核心的是：MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。Angular通过指令扩展了HTML，以一个 JavaScript文件形式发布，通过script标签添加到网页中。Angular的优势在于：零配置、深度整合设计模式、约定才是框架的本质。不过对于JavaScript工程师来说，少有工程化的经验，学习起来会比较痛苦。
2、React
React是一个Facebook和Instagram用来创建用户界面的JavaScript库，用于构建页面、Javascript库。主要功能是对DOM操作，声明式设计，更快的开发出Web应用系统。借助React，你可以非常轻松地创建用户交互界面，为你应用的每一个状态设计简洁的视图。在数据改变时，React也可以高效地更新渲染界面。
3、Vue
Vue是用于构建交互式的Web界面的库，它提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲，Vue集中在MVVM模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的DOM操作和输出格式被抽象出来成指令和过滤器，相比其它的MVVM框架，Vue更容易上手。
综上所述，在大型超大型Web应用开发上比较看好Angular，个性化需求、中型应用更倾向选择React，在小型应用上则看好Vue。当然不同企业会有不同的需求，所选用的框架也不一样，但只要你具备扎实的理论基础，就可以很快上手这些框架。
