1、首先新建一个html空白文档,取名字叫做css3动画,保存一下。
创新互联主要从事成都网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务揭东,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
2、然后写html结构,只需要一个div元素即可,class名字叫做img
3、设置其边框为不同的颜色,边框宽度设置成100px。
4、因为是圆环,所以我们用到了css3的圆角效果,设置圆角为50%,也就是border-radius:50%,看一下效果。
5、接下来就是关键的步骤了,也就是添加动画效果。输入以下代码
6、来看一下最后的效果,还是不错的。
使用css3 属性方法 rotate() 实现旋转
transform-origin是规定如何旋转
: center center;为以围绕中心点旋转;
top left; 以围绕左上角旋转;
top right; 以围绕右上角旋转;
1、首先新建一个html5文档,完成基本代码编写,如下图所示。
2、然后新建一个长100像素,高50像素背景为红色的长方形图层。
3、接着通过输入“border-radius:50%/50%”属性,如下图所示,将长方形图层设置成一个椭圆形。
4、接下来就是将椭圆旋转了,用“transform:rotate(30deg)”将椭圆旋转30度。
5、这样就实现了用css3将椭圆旋转,如下图所示预览即完成了。