css3旋转加载及其它动画效果

来源:https://www.sucaihuo.com/js/1980.html 2017-05-19 22:49浏览(1380) 收藏

一款非常简单的css3加载动画效果,一共有6样式可供选择,效果包括:旋转、缩放、波动等,可以参考学习一下。
css3旋转加载及其它动画效果
分类:css3 > 进度条 难易:入门级
查看演示 下载资源 下载积分: 20 积分

开头没有引用任何jquery库,直接引入CSS样式即可:

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

body部分写好各个动画的容器,代码如下:

<div class="container">
    <div class="canvas canvas1">
      <div class="spinner1 spinnerMax">
        <div class="spinner1 spinnerMid">
          <div class="spinner1 spinnerMin"></div>
        </div>
      </div>
    </div>
    
    <div class="canvas canvas2">
      <div class="spinner2"></div>   
      <div class="hourHand"></div>
      <div class="dot"></div>
    </div>
    
    <div class="canvas canvas3">
      <div class="spinner3"></div>   
    </div>
    
    <div class="canvas canvas4">
      <div class="spinner4"></div>   
    </div>
    
    <div class="canvas canvas5">
      <div class="spinner5"></div>   
    </div>
    
    <div class="canvas canvas6">
      <div class="spinner6 p1"></div>
      <div class="spinner6 p2"></div>
      <div class="spinner6 p3"></div>
      <div class="spinner6 p4"></div>
    </div>
  </div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2