不用css3实现圆，css 圆

css3圆环旋转效果动画怎么做

1、在动画帧时加入rotate(角度)就可以旋转并移动，可以参考下面代码。

2、transform：rotate()； } 设置旋转，旋转多少度决定圈数，时间和平缓度（变化模式）在动画里设置，另外你要设置一下你的旋转中心，把旋转中心设置到你规定的圆的圆心（transform-origin）。

3、animation：myfirst 1s both linear infinite；/*绑定动画。为了看清楚效果，设置动画反复执行。

4、当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。

5、首先新建一个html5文档，完成基本代码编写，如下图所示。然后新建一个长100像素，高50像素背景为红色的长方形图层。接着通过输入“border-radius：50%/50%”属性，如下图所示，将长方形图层设置成一个椭圆形。

6、在CSS3动画中，我们可以利用关键帧(@keyframes)来定义动画的开始、中间和结束状态，并设置动画的属性，例如：填充颜色、透明度、旋转角度等。在本例中，我们可以利用关键帧来定义圆形路径填充颜色的变化，从而实现波浪循环效果。

相关问答

Q1: 使用CSS3.0实现圆角边框,浏览器无法显示

-webkit-border-radius：10px；-moz-border-radius：10px；border-radius：10px；为了获得更好的兼容性，一般写上面这三个就行了。

我们新建一个html网页文件，把他命名为test.html，接下来我们用test.html文件来讲解css如何设置圆角边框。在test.html文件内，要使用p标签创建一行文字，并且把文字内容写上“css如何设置圆角边框”。

css运行浏览器运行尚不支持怎么添加属性，使用JavaScript：如果CSS属性非常重要且无法绕过，可以使用JavaScript来实现相同的效果，例如，如果浏览器不支持opacity属性，可以使用JavaScript来设置元素的透明度。

CSS3圆角只需设置一个属性：border-radius（含义是边框半径）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

尝试使用更通用的浏览器（例如ie或Google浏览器）。您使用的浏览器可能不支持网银的页面显示脚本，所以会出现这个错误。解决方案：可以通过在样式文件中指定CSS样式的优先级来解决这个问题。

主要使用CSS3属性border-radius属性定义圆角效果。

Q2: 不用border-radius怎么实现圆角

前缀：-moz(例如 -moz-border-radius)用于Firefox，-webkit(例如：-webkit-border-radius)用于Safari和Chrome。

不用图片的圆角就是css3了，先看代码 .round-angel { -moz-border-radius： 1em；-webkit-border-radius： 1em；border-radius： 1em；} 标准的css属性是border-radius，值是圆角的半径。

css圆角实现的方式有很多种，最简单最方便的是使用border-radius属性。或者使用圆角图片。border-radius后面直接接数值。图片圆角就是事先切除圆角图片，可以制作定高，或者定宽的div。

用CSS3创建圆角的方法 Border radius（边界半径）W3C建议已经建议为boder增加几个属性选项，其中之一就是border-radius，目前这个属性已经被Firefox和Safari 3(Chrome)支持，比较遗憾的是IE不支持此属性。

怎么能让一个DIV或者一个图片的四角为圆形呢？其实并不需要我们去把每个角都剪切掉，而只需要设置每个解的圆狐度即可。

CSS3就不会发生这种情况。border-radius属性CSS3圆角只需设置一个属性：border-radius(含义是边框半径)。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

不用css3实现圆的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css 圆、不用css3实现圆的信息别忘了在本站进行查找喔。