CSS 3 选择器加入了一个叫 :target 的伪类，它的作用是选中id与地址栏中#匹配的元素。如下：
html:
<a href="#tab1">tab1</a><a href="#tab2">tab2</a>
<div id="tab1">...</div>
<div id="tab2">...</div>
css:
div { display: none }div:target { display: block }
当用户点击第一个链接的时候，地址栏会变成：http://.......#tab1，此时会显示id为tab1的div，点击第二个链接的时候，地址栏会变成：http://......#tab2，此时会显示id为tab2的div。
假设用来显示圆点div的class是point，图片区域的大小是10*10px的，然后那个图片的文件名是point_pic.gif。那么html的代码大致上可以写成下面这样<div class="point"></div>
在css里面的定义可以是这样：
.point {width:10pxheight:10pxbackground:url(point_pic.gif) 0 0 no-repeat}
.point:hover {background:0 -10px}
这样就可以实现鼠标移上去以后改变背景图片的效果了，其实本质上就是先给div设置一个固定的大小，然后控制在鼠标滑过状态时，背景图片在div里面的位置
下面是一个例子，具体的需要你自己慢慢学习。
<!DOCTYPE html><html>
<head>
<style>
div
{
width:100px
height:100px
background:red
position:relative
animation:myfirst 5s linear 2s infinite alternate
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate
}
@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}
}
</style>
</head>
<body>
<p>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>
