10种动态图标实现-CSDN博客

本文链接：https://blog.csdn.net/Shmily_ox/article/details/105605120

10种动态图标的制作

下面这张图就是效果图，那么如何实现呢？其实就是对CSS3相关属性的综合应用，其中涉及到CSS3的变形、动画以及HTML5的文本属性等等。一起来看看吧! 在这里插入图片描述

具体代码如下：

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>练习一</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

  <div id="caseVerte">  
  <div id="case1"></div>
  <div id="case2"></div>
  <div id="case3"></div>
  <div id="case4"></div>
  <div id="case5"></div>
  <div id="case6"></div>
  <div id="load">
  <p>loading ...</p>
  </div>
</div>
<div id="caseBleu">  
  <div id="case1"></div>
  <div id="case2"></div>
  <div id="case3"></div>
  <div id="case4"></div>
  <div id="case5"></div>
  <div id="case6"></div>
  <div id="load">
  <p>loading ...</p>
  </div>
</div>
<div id="caseRouge">
  <div id="load">
      <p>loading ...</p>
  </div>
  <div id="top"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>
<div id="caseMarron">
  <div id="boule"></div>
  <div id="load">
  <p>loading ...</p>
  </div>
</div>
<div id="caseViolette">
  <div id="cercle">
     <div id="cercleCache"></div>
  </div>
  <div id="load">
    <p>loading</p>
  </div>
  <div id="point"></div>
</div>
<div id="caseBlanche">
  <div id="rond">
    <div id="test"></div>
  </div>
  <div id="load">
    <p>loading</p>
  </div>
</div>
<div id="casePourpre">
  <div id="load">
    <p>loading</p>
  </div>
  <div id="vague">
    <div id="vague1"></div>
    <div id="vague2"></div>
    <div id="vague3"></div>
    <div id="vague4"></div>
    <div id="vague5"></div>
    <div id="vague6"></div>
  </div>
</div>
<div id="caseVerteClaire">
  <div id="transform">
    <div id="transform1"></div>
    <div id="transform2"></div>
    <div id="transform3"></div>
  </div>
   <div id="load">
    <p>loading</p>
  </div>
</div>
<div id="caseGrise">
  <div id="progress">
    <div id="charge"></div>
  </div>
  <div id="load">
    <p>loading</p>
  </div>
</div>
<div id="caseMarronFonce">
  <div id="spinner"></div>
</div>

<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>