css实现圆环旋转加载

html-css017

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>

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

做斜线运动

设置Y轴延时为动画时长的一半, 运动轨迹变成菱形

为了看起来有立体感添加scale属性,scale动画应该是X轴和Y轴的时间总和