开发者社区> 问答> 正文

这个网页的加载中的动画是通过什么实现的?是canvas吗?我想仿制一个应该怎么搞?

展开
收起
杨冬芳 2016-06-08 11:14:34 1882 0
1 条回答
写回答
取消 提交回答
  • IT从业

    http://runjs.cn/detail/qkpuuef7点击预览

    <!-- HTML-->
    <div class="spinner5">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>    
    // CSS3
    .spinner5 {
      width: 100px;
      text-align: center;
    }
     
    .spinner5 > div {
      width: 20px;
      height: 20px;
      background-color: #67CF22;
     
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      /* Prevent first frame from flickering when animation starts */
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
     
    .spinner5 .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
     
    .spinner5 .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
     
    @-webkit-keyframes bouncedelay {
      0%, 80%, 100% { -webkit-transform: scale(0.0) }
      40% { -webkit-transform: scale(1.0) }
    }
     
    @keyframes bouncedelay {
      0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
    
    2019-07-17 19:31:27
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
3D动画的菜谱式灯光与云渲染 立即下载
《优酷响应式布局技术全解析》 立即下载
骨骼动画实践 立即下载

相关实验场景

更多