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

html-css023

css3圆环旋转效果动画怎么做,第1张

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

2、然后写html结构，只需要一个div元素即可，class名字叫做img

3、设置其边框为不同的颜色，边框宽度设置成100px。

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

5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码

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

你的代码里面只有位置移动的top,left。没有写旋转的代码。

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

相关示例如下：

<style>

.ani{animation:box 1s linear 0s infinitewidth:100pxheight:100pxbackground:greenborder-radius:50%}

@keyframes box{0% {transform:rotate(0deg)translate(0,0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)translate(-300px,0)}75%{transform:rotate(270deg)}100% {transform:rotate(360deg)translate(0,0)}}

</style>

<div class="ani"></div>

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。