让网页上的元素更加的动感，给自己的网页增添动感的图标是每一个人的愿望，我们作为网页制作人员第一个想到的当然是无所不能的CSS工具了。通过CSS工具可以实现很多精彩的小样式。
工具/原料
dreamweaver
方法/步骤
1
思路。从我们的例子来看，这个网页当中就是动感的小圆标，我们做一个就可以进行多个的复制了。
2
代码分析。做这样的一个可以产生多个渐变的发散状的小图标与文字落实在CSS代码上面就是 border/backgrund-color/align/front/background-repeat等等这些代码了， 我们可以一一来落实。
3
背景的样式，这个背景包括图片与颜色两大部分，我们一一声明一下。background-image:url(*.gif);background-repeat:no-repeat;background-size:100%;background-position:0;
4
文字的样式也要用代码来实现一下。style='width:2.5em;height:3em;color:red;font-size:1em;
5
文字与图像的关系代码line-height:3em;display:inline-block;text-align:center;
6
整个边框的代码。margin:0 auto;
7
整个代码流程给出来。 1
注意事项
文字与图像中心对齐是关键。
上一篇：用PS怎么做简单的动态图标
下一篇：用java程序做动感小图标