Method/Step首先我们新建一个html空白文档，命名为css3Animation，保存,因为css3animation需要一个现代先进的浏览器，边肖使用了一个chrome浏览器进行测试，所以添加了-webkit前缀,因为是圆环，所以我们使用css3的圆角效果，将圆角设置为50%，即border-radius:50%。
Method/Step首先我们新建一个html空白文档，命名为css3 Animation，保存。然后写html结构，我们只需要一个div元素，类名是img。我们设置边框为不同的颜色，边框宽度为100像素。因为是圆环，所以我们使用css3的圆角效果，将圆角设置为50%，即border-radius:50%。来看看效果吧。接下来是关键的一步，就是添加动画效果。因为css3 animation需要一个现代先进的浏览器，边肖使用了一个chrome浏览器进行测试，所以添加了-webkit前缀。
2、CSS3中的动画效果transform:translateZ(以下代码在Chrome上运行良好:如果在其他浏览器上不行，你可以自己加个前缀再试。注意:只有IE10 、FireFox、Chrome和Safari支持3D转换效果，分机:1。CSS是一个级联样式表，在网页制作中使用级联样式表可以有效地更准确地控制页面的布局、字体、颜色、背景等效果。2.CSS3是CSS技术的升级版，CSS3语言的发展是朝着模块化方向发展的，作为一个模块，以前的规范过于庞大和复杂，所以它被分解成更小的模块，并添加更多的新模块。这些模块包括:框模型、列表模块、超链接模式、语言模块、背景和边框、文本特效、多栏布局等等。
