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语言的发展是朝着模块化方向发展的,作为一个模块,以前的规范过于庞大和复杂,所以它被分解成更小的模块,并添加更多的新模块。这些模块包括:框模型、列表模块、超链接模式、语言模块、背景和边框、文本特效、多栏布局等等。
文章TAG:css3动效插件 插件 css3 动效 浏览器 第一篇