css3搜索等待动画效果代码？值得你学习-css教程-PHP中文网

首页

web前端

css教程

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

云罗郡主

Oct 16, 2018 pm 03:10 PM

本篇文章给大家带来的内容是关于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搜索等待动画效果代码？值得你学习的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：qdfuns。如有侵权，请联系admin@php.cn删除

Indieweb和网络企业Apr 19, 2025 am 11:16 AM

Indieweb是一回事！他们将举行会议和一切。纽约客甚至在写这件事：

（开发人员）增长模型Apr 19, 2025 am 11:08 AM

我真的很喜欢Dennis Hambeukers的帖子“设计师的成长模式”。丹尼斯只是发明了这种模型，但它基于一些现有想法，这一切

闹鬼：Web组件的挂钩Apr 19, 2025 am 11:06 AM

我只是和戴夫聊天，他告诉我关于鬼魂的聊天。它的钩子，但适用于本机Web组件！很酷。我认为这样的东西存在

每周平台新闻：活动时机，网络的Google Earth，不死会话cookieApr 19, 2025 am 10:57 AM

在本周的新闻中，Wikipedia有助于识别三个慢单击处理程序，Google Earth登上了网络，CSS中的SVG属性获得了更多的支持，以及在僵尸cookie的情况下该怎么做。

纯CSS的多线截断Apr 19, 2025 am 10:50 AM

本文中的诀窍仍然非常整洁又聪明，但是现在有一种标准化的方法可以做到这一点，这可能是您最好的选择。

CSS动画库Apr 19, 2025 am 10:46 AM

有很多库希望帮助您在网络上进行动画操作。这些是真正帮助您使用语法或的图书馆

颜色输入：深入研究跨浏览器差异Apr 19, 2025 am 10:40 AM

在本文中，我们将查看内部元素内部的结构，浏览器不一致，为什么它们在某个浏览器中以某种方式看起来

将（伪）元素限制到其父元的边框框Apr 19, 2025 am 10:39 AM

您是否曾经想确保（伪）元素在其父框架之外没有显示任何内容？如果您在想象什么

See all articles

热AI工具

热工具

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），