css实现圆环旋转加载

html-css013

css实现圆环旋转加载,第1张

css实现圆环旋转加载

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>css实现圆环旋转加载</title>

<style>

*{

margin:0

padding:0

}

#outbox{

position:relative/*相对定位*/

width:100px/*宽度100px*/

height:100px/*高度100px*/

background:orange/*背景色橙色*/

border-radius:50%/*圆角50%*/

margin:100px/*外侧边距100px*/

}

#outbox::before{/*前置伪元素*/

content:""/*内容空*/

display:block/*块元素*/

position:absolute/*绝对定位*/

width:80px/*宽度80px*/

height:80px/*高度80px*/

left:10px/*左边距10px*/

top:10px/*距离顶部10px*/

border-radius:50%/*圆角50%*/

background:white/*背景色白色*/

}

#outbox::after{/*后置伪元素*/

content:""/*内容为空*/

display:block/*转为块元素*/

position:absolute/*绝对定位*/

width:100px/*宽度100px*/

height:100px/*高度100px*/

top:0/*距离父容器顶部边距0*/

left:0/*距离入容器左边距0*/

border-radius:50%/*圆角50%*/

background:white/*背景色白色*/

animation:myfirst 1s both linear infinite/*绑定动画。为了看清楚效果，设置动画反复执行。使用的时候只执行一次就好了*/

-webkit-animation:myfirst 1s both linear infinite/* Safari and Chrome */

}

@keyframes myfirst/*动画开始*/

{

0%{

-webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0, 100% 0)/*不裁剪的初始效果*/

clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0, 100% 0)

}

40%{

-webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0, 0 0)/*裁剪四分之一*/

clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0, 0 0)

}

60%{

-webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 100%, 0 100%)/*裁剪四分之二*/

clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 100%, 0 100%)

}

90%{

-webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%)/*裁剪四分之三*/

clip-path: polygon(50% 50%, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%)

}

100%{

-webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 100% 0, 100% 0, 100% 0)/*裁剪四分之四*/

clip-path: polygon(50% 50%, 100% 0, 100% 100%, 100% 0, 100% 0, 100% 0)

}

}

</style>

</head>

<body>

<div id="outbox"></div>

</body>

</html>

<!--裁剪比较粗糙，如果要更顺滑，可以裁剪得更细腻一点，比如裁剪十分之一，十分之二，十分之三，以此类推一直到十分之十。-->

1、首先准备一个HTML结构的文档，页面可以制作的简单点。

2、然后在页面的body区域中放置一个img图片。

3、我们先来运行一下页面，你会在页面中看到如下图所示的圆圈。

4、接下来我们就需要对页面进行CSS处理，如下图所示，给img图片添加样式，注意里面有旋转样式。

5、然后实现旋转的设置，这个是CSS3的新功能，主要是对图片进行旋转度数的设置。

6、最后运行程序，你会看到页面中的圆圈在不停的旋转，和我们平常看到的加载中的效果很像。