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

css3的动画灰常流行，下面小编就来做一个简单的css3圆环旋转动画的效果。下面是完成的效果。

操作方法

  • 01

    首先我们新建一个html空白文档，取名字叫做css3动画，保存一下。

  • 02

    然后写html结构，我们只需要一个div元素即可，class名字叫做img。我们设置其边框为不同的颜色，边框宽度设置成100px。

  • 03

    因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。

  • 04

    接下来就是关键的步骤了，也就是添加动画效果。

  • 05

    因为css3动画需要现代比较高级的浏览器才行，所以小编用chrome浏览器来测试，所以加了-webkit前缀。 <style type="text/css"> .img{ width:200px; height:200px; border:100px solid green; border-left-color: red; border-right-color: black; border-top-color: yellow; margin:100px; border-radius:50%; -webkit-animation:circle 1s infinite linear;/*匀速 循环*/ } @-webkit-keyframes circle{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(-360deg); } } </style>

  • 06

    来看一下最后的效果，还是不错的。

赞 (0)

相关推荐

  • 巧用PPT2010中的合并及动画刷做大量简报

    本文介绍如何巧妙利用PowerPoint2010中的合并以及动画刷，在短时间内快速制作大量内容基本上重复的PPT演示文档。 年终将至，为了向公司员工和各级领导做年终汇报，总需要把各种报告、图表、表格数 ...

  • solidworks怎么制作一个旋转动画? sw做旋转动画的教程

    solidworks中想要制作一个旋转动画效果,今天我们就来详细介绍一下制作方法,请看下文详细介绍. 1.首先,绘制好两个零部件,新建装配体,将两个绘制好的零部件插入到装配体当中. 2.接着,将两个零 ...

  • AE怎么做MG动画? AE做MG动画的技巧

    Motion Graphics,也就是我们常说的MG动画,简单一点来说就是图形动画,动态图形的意思,下面小编说一下用AE做MG动画要注意哪些问题. 1.一定要打开字幕/活动安全框.这个框是一个活动参考 ...

  • ppt动画转场特效在哪里（ppt转场动画怎么做）

    ppt动画转场特效在哪里（ppt转场动画怎么做）

    大家好,今天给大家说说转场动画的一种做法.什么是转场动画呢,说白了,转场动画跟PPT中的切换所起的作用是一样的,就是从一个画面转到另一个画面的时候,这中间的过渡.咱们先来看看下面几个案例吧:案例一案例 ...

  • contact card gif动画【做作业】

    天天做icon,APP有木有做烦呢?今天我们就来做个gif动画哦!这个可以用ps完成 当然会AE的童鞋用AE做是最好的啦! 提示:动效不难,打帧的时候多加细心. 要求:提交的作业在背景的右下角或评论框 ...

  • 小火箭loading动画【做作业】

    每周最让人激动的时候到了,为啥呢?因为明天就是周末了.但是今天我们依旧要把今天的作业的 作业做完哦~~今天我们的作业是一个小火箭loading动画,各位童鞋加油哦~~ 注意:1.icon的一个结构比例 ...

  • loaidng动画【做作业】

    好像很久没久做gif动画了是吧?今天我们就来做一个吧!一个简单的loading动效,用到了旋转和位移 注意点: 注意动作快慢的调节(两个关键帧中间打一帧,拖住这一帧,往左移是减速运动,往右移是加速运动 ...

  • 在C4D中怎么做生长动画（做生长动画的方法）

    在很多的3维的软件中,生长动画都是很常用的.那么今天就和大家分享一下在C4D软件中怎么做生长动画以及常用的做生长动画的方法.这次就简单的和大家介绍一下这5种方法: 1.缩放做生长 2.切片做生长 3. ...

  • 遮罩动画怎么做

    不知道大家在看电影.电视剧的时候有木有注意到视频里一些回忆的镜头画面,有的回忆画面是由两个视频组接而成的,就是一个画面清晰,一个画面比较模糊,而且两个视频链接的地方却能很自然地组接在一起,这样就形成了 ...