css3搜索等待动画效果代码？

<html>

<head>

<linkrel="stylesheet"href="//at.alicdn.com/t/font_720452_mhj331xuxd8.css">

<style>

margin:0;

padding:0;

}

.load-icon{

left:0;

right:0;

bottom:0;

top:0;

margin:auto;

display:flex;

justify-content:center;

align-items:center;

position:fixed;

}

.load-icon>div{

width:100px;

height:100px;

border-radius:50%;

border:8pxsolidtransparent;

border-left-color:rgba(35,196,81,1);

animation:animate1slinearinfinite;

}

.load-icon>span{

position:absolute;

color:#fff;

text-shadow:1px3px5px#333;

width:80px;

height:80px;

border:8pxsolidtransparent;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

}

.load-icon>span>i{

font-size:50px;

animation:animate13slinearinfinite;

}

.load-icon>span>span{

font-size:50px;

animation:shadow3slinearinfinite;

color:rgba(35,196,81,1);

overflow:hidden;

position:absolute;

top:13px;

}

@keyframesanimate{

0%{transform:rotate(0deg);box-shadow:inset005pxrgba(35,196,81,.1)}

50%{box-shadow:inset005pxrgba(35,196,81,1)}

100%{transform:rotate(360deg);box-shadow:inset005pxrgba(35,196,81,.1)}

}

@keyframesanimate1{

0%{transform:translate3d(150%,0,0);}

30%{transform:translate3d(0%,0,0);}

70%{transform:translate3d(0%,0,0);}

100%{transform:translate3d(-150%,0,0);}

}

@keyframesshadow{

0%{transform:translate3d(150%,0,0);height:0%}

30%{transform:translate3d(0%,0,0);height:0%}

70%{transform:translate3d(0%,0,0);height:100%}

100%{transform:translate3d(-150%,0,0);height:100%}

}

</style>

</head>

<body>

<divclass="load-icon">

<span>

<iclass="iconfonticon-sousuo"></i>

<spanclass="iconfonticon-sousuo"></span>

</span>

</div>

</body>

</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c57302.shtml