首页 > 开发 > CSS > 正文

实例教程 纯CSS3打造非常炫的加载动画效果

2024-07-11 08:30:23
字体:
来源:转载
供稿:网友

  纯css3打造的一款非常炫的加载图。用在需要一定时间加载的地方非常合适。代码非常简单。没有用任何javascript代码。纯css3实现。先上效果图:

  实现代码如下:

  html代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="content">          <div style="width: 970px; margin: auto">  
  2.        </div>          <div class="rotate">  
  3.            <span class="triangle base"></span><span class="triangle no1"></span><span class="triangle no2">              </span><span class="triangle no3"></span>  
  4.        </div>      </div>  

  CSS代码:

CSS Code复制内容到剪贴板
  1. body {        padding:0;   
  2.     margin:0;           background-color: #2a4e66;   
  3.   overflow: hidden;    }   
  4.    .content {   
  5.     width:100%;        height:100%;   
  6.     top:0;        rightright:0;   
  7.     bottombottom:0;        left:0;   
  8.     position:absolute;    }   
  9.    .rotate {   
  10.     position: absolute;        top: 50%;   
  11.     left: 50%;        margin: -93px 0 0 -93px;   
  12.     background: transparent;        width: 186px;   
  13.     height: 186px;        border-radius: 50%;   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表