spinbox.html

最新推荐文章于 2022-07-22 07:54:03 发布

oneslide

最新推荐文章于 2022-07-22 07:54:03 发布

阅读量567

点赞数

分类专栏： FrontEnd

本文链接：https://blog.csdn.net/qq_33745102/article/details/73497523

版权

FrontEnd 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="GBK">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="oneslide">
  <meta name="Keywords" content="load">
  <meta name="Description" content="load animation">
  <title>旋转的加载动画</title>
  <style>
  body,html{
       background-color:rgba(20,30,45,0.8);
       display:-webkit-box;/**盒子的展示方式，盒子为块的样式展示。也就是说，一个元素所影响的定位会仅限于自己的尺寸。如果没有，元素所占的一行背景将加深。**/

	   -webkit-box-align:center;/**上下居中**/
	   -webkit-box-pack:center;  /**    左右居中**/
	     width:100%;
	     height: 100%;
	
		
  }
  #container{
         margin:0 auto;  /*让盒子左右居中*/
	    
  }
  .load{
      border:2px solid white;
      border-top:2px solid black;
	  -webkit-animation:spin 1s  linear infinite;
      width:75px;
	  height:75px;
	  border-radius:50%;
  }
   @-webkit-keyframes spin{
        to{
        -webkit-transform:rotate(360deg);
        }
  }
  </style>

 </head>
 <body>
          <div id="container">
		        <div class="load"></div>
		  </div>
 </body>
</html>

oneslide

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
spinbox.html

<!doctype html><html lang="en"> <head> <meta charset="GBK"> <meta name="Generator" content="EditPlus"> <meta name="Author" content="oneslide"> <meta name="Keywords" content="load"> <meta na
复制链接

扫一扫