css3如何实现搜索等待动画效果

这篇文章主要介绍css3如何实现搜索等待动画效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联-专业网站定制、快速模板网站建设、高性价比晋安网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式晋安网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖晋安地区。费用合理售后完善，十年实体公司更值得信赖。

<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>

以上是“css3如何实现搜索等待动画效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

文章标题：css3如何实现搜索等待动画效果
分享链接：https://www.cdcxhl.com/article46/pohceg.html

成都网站建设公司_创新互联，为您提供Google、域名注册、营销型网站建设、软件开发、网站建设、云服务器

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容