Question

使用css-spinner动画，我试图对其进行装配，使其在1秒后结束。基本上，它在刷新时充当加载类型动画。我在javascript上不是很好，也无法找到适合我的代码的解决方案。任何提示或方向，非常感谢。谢谢。 -Wilson

我现在所拥有的：http://www.wilsonschlamme.com/test.html

  <!doctype <!DOCTYPE html>
  <html>
  <head>
  <title>CSS spinners</title>
  <meta name="description" content="A gallery of pure CSS spinners and 
   loading indicators" />
  <meta name="keywords" content="css spinner loading indicator 3d" />
  <link rel="stylesheet" type="text/css" href="test.css">
  <style type="text/css">
 :focus {outline:none;}
 body {
  text-align: center;
  background: url(bg.png);
  height: 100%;
  margin: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
 }

  </style>
  <script type="text/javascript" src="//code.jquery.com/jquery-    
  2.1.3.min.js">                       
 </script>
 <script type="text/javascript">

   </script>
 </head>
 <body>

   <div class="spinner colorwheel" id="colorwheel">
     <div class="centerpiece"></div>
   </div>
   <div class="spinner infinity" id="infinity">
     <div class="half">
  <div class="marker"></div>
  <div class="marker"></div>
  <div class="marker"></div>
  <div class="marker"></div>
  <div class="marker"></div>
  <div class="marker"></div>
  </div>
  <div class="half">
  <div class="marker"></div>
  <div class="marker"></div>
  <div class="marker"></div>
  <div class="marker"></div>
  <div class="marker"></div>
  <div class="marker"></div>
  </div>
  </div>
  </body>
  </html>

CSS

 /* GENERAL */

 @-webkit-keyframes fade {
   from { opacity: 1; }
   to { opacity: 0.2; }
 }
 @keyframes fade {
   from { opacity: 1; }
   to { opacity: 0.2; }
 }

 @-webkit-keyframes rotate {
   from { -webkit-transform: rotate(0deg); }
   to { -webkit-transform: rotate(360deg); }
 }
 @keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }




 /* COLOR WHEEL */

 .spinner.colorwheel {
   position: relative;
   display: inline-block;
   width: 60em;
   height: 60em;
   overflow: hidden;
   border-radius: 100%;
   z-index: 0;
 }

 .spinner.colorwheel::before,
 .spinner.colorwheel::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }

 .spinner.colorwheel::before {
   background: linear-gradient(to right, green, yellow);
   -webkit-animation: rotate 2.5s linear infinite;
   animation: rotate 2.5s linear infinite;
 }

 .spinner.colorwheel::after {
  background: linear-gradient(to bottom, red, blue);
 -webkit-animation: fade 2s infinite alternate, rotate 2.5s linear reverse     
infinite;
  animation: fade 2s infinite alternate, rotate 2.5s linear reverse         
infinite;}

.spinner .centerpiece {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 100%;
  box-sizing: border-box;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  border-bottom: 0.5em solid rgba(255, 255, 255, 0.3);
  border-top: 0.5em solid rgba(255, 255, 255, 0.3);
  -webkit-animation: rotate 0.8s linear infinite;
  animation: rotate 0.8s linear infinite;
}

X =秒后结束css-spinner动画

0 个答案: