您的位置： 首页 » css » 正文

纯CSS3模拟谷歌Loading加载动画

分类：css 作者：15323441764 浏览：534 2021年8月20日 14:52 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS3模拟谷歌Loading加载动画</title>



</head>
<body>

<h1>谷歌CSS3加载动画</h1>

<div class="content">
  <div class="column">
    <div class="container animation-1">
      <div class="shape shape1"></div>
      <div class="shape shape2"></div>
      <div class="shape shape3"></div>
      <div class="shape shape4"></div>
    </div>
  </div>
  <div class="column">
    <div class="container animation-2">
      <div class="shape shape1"></div>
      <div class="shape shape2"></div>
      <div class="shape shape3"></div>
      <div class="shape shape4"></div>
    </div>
  </div>
  <div class="column">
    <div class="container animation-3">
      <div class="shape shape1"></div>
      <div class="shape shape2"></div>
      <div class="shape shape3"></div>
      <div class="shape shape4"></div>
    </div>
  </div>
  <div class="column">
    <div class="container animation-4">
      <div class="shape shape1"></div>
      <div class="shape shape2"></div>
      <div class="shape shape3"></div>
      <div class="shape shape4"></div>
    </div>
  </div>
  <div class="column">
    <div class="container animation-5">
      <div class="shape shape1"></div>
      <div class="shape shape2"></div>
      <div class="shape shape3"></div>
      <div class="shape shape4"></div>
    </div>
  </div>
  <div class="column">
    <div class="container animation-6">
      <div class="shape shape1"></div>
      <div class="shape shape2"></div>
      <div class="shape shape3"></div>
      <div class="shape shape4"></div>
    </div>
  </div>
</div>



</body>
</html>


纯CSS3模拟谷歌Loading加载动画
标签：

评论者:[[ schemeInfo.user.username ]]

评论内容:[[ schemeInfo.pbody ]]

评论时间:[[ schemeInfo.ptime ]]




发表你的评论:

提交评论
上一篇： HTML5/CSS3超链接图片弹出动画
下一篇： HTML5 Canvas爱心表白动画特效