给你做 第一个，用的是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>
使用了particles.js
particles.js可以从github网站下载到最新的源码，网址是 https://github.com/VincentGarreau/particles.js/
使用方法非常简单
第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找到
<script src="particles.min.js"></script>第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。
<div id="particles-js"></div><style type="text/css">
#particles-js {
position: absolute
top:0
width:100%
}
</style>
第三步，设置窗口样式
<style type="text/css">#particles-js {
z-index: -1
position: absolute
top: 0
width: 100%
background: #aaa
}</style>
第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在<script>标签里。无论如何，这段脚本要出现在div容器之后。
particlesJS("particles-js", { "particles": { "number": { "value": 380, "density": { "enable": true, "value_area": 800}
}, "color": { "value": "#ffffff"
}, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000"
}, "polygon": { "nb_sides": 5
}, "image": { "src": "img/github.svg", "width": 100, "height": 100
}
}, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false
}
}, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false
}
}, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1
}, "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200
}
}
}, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "grab"
}, "onclick": { "enable": true, "mode": "push"
}, "resize": true
}, "modes": { "grab": { "distance": 140, "line_linked": { "opacity": 1
}
}, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3
}, "repulse": { "distance": 200, "duration": 0.4
}, "push": { "particles_nb": 4
}, "remove": { "particles_nb": 2
}
}
}, "retina_detect": true})
JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
HTML超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改
即是说
javascript 代码可以让前台变的有动画有交互
jquery是一个封装好，就是指别编好了的可以供他人重复运用的js代码
css是样式表，就是指网站上用什么样式，如边框的精细，背景的颜色等等。css3是他的高版本。
html是一种网页代码，我们好说是前台代码，或说是静态代码。html5是它的升级版，里面加入了好多以前要用js才能来完成，现在用这些标签就可以完成了，也就是说加了好多更适合现在时代发展需要的标签。
html5可以说还是来布局，然后还是用样式来规它的皮肤，然后用js代码或jquer代码来完成对它们的控制，以达到对网站前台动画或交互的实现。
