css3搜索等待动画效果代码？值得你学习

互联网 18-10-16

本篇文章给大家带来的内容是关于css3搜索等待动画效果代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

【相关视频推荐：Bootstrap教程】

<html>   <head>     <link rel="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:8px solid transparent;           border-left-color:rgba(35, 196, 81,1);           animation: animate 1s linear infinite;       }       .load-icon>span{           position: absolute;           color:#fff;           text-shadow: 1px 3px 5px #333;           width: 80px;           height:80px;           border:8px solid transparent;           overflow: hidden;           display: flex;           justify-content: center;           align-items: center;       }       .load-icon>span>i{           font-size:50px;           animation: animate1 3s linear infinite;       }       .load-icon>span>span{           font-size:50px;           animation: shadow 3s linear infinite;           color:rgba(35, 196, 81,1);           overflow: hidden;           position:absolute;           top:13px;       }       @keyframes animate{           0% { transform: rotate(0deg) ;box-shadow:inset 0 0 5px  rgba(35, 196, 81,.1)}           50% { box-shadow:inset 0 0 5px  rgba(35, 196, 81,1) }           100% { transform: rotate(360deg);box-shadow:inset 0 0 5px  rgba(35, 196, 81,.1) }       }       @keyframes animate1{           0% { transform:translate3d(150%,0,0);}           30% { transform:translate3d(0%,0,0);}           70% { transform:translate3d(0%,0,0);}           100% { transform:translate3d(-150%,0,0);}       }       @keyframes shadow{           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>     <div class="load-icon">       <span>         <i class="iconfont icon-sousuo"></i>         <span class="iconfont icon-sousuo"></span>       </span>       <div></div>     </div>   </body> </html>

以上就是对css3搜索等待动画效果代码的全部介绍，如果您想了解更多有关CSS视频教程，请关注PHP中文网。

以上就是css3搜索等待动画效果代码？值得你学习的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：效果代码