zoukankan      html  css  js  c++  java
  • loading实现

    loading1:

    布局实现:

    <div class="out">
    <div class="in">

    </div>
    </div>

    style  css3动画属性实现loading

    .out{
    margin: 0 auto;
    46px;
    height: 46px;
    background: linear-gradient(black,white) ;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;

    }
    .in{
    40px;
    height: 40px;
    background: white;
    margin-top:3px;
    margin-left:3px;
    border-radius: 50%;
    }
    .out{
    animation: move 1s ease infinite;

    }
    @keyframes move{
    0%{transform: rotate(0deg);}
    0%{transform: rotate(360deg);}
    }

    loading2:

    布局:

    <div class="pencil">
    <div class="pen">

    </div>
    <div class="pen">

    </div>
    <div class="pen">

    </div>
    <div class="bottom">
    </div>
    </div>

    样式实现:

    .pencil{
    margin: 0 auto;
    200px;
    height: 30px;
    /*border-bottom: 5px solid #ccc;*/
    position: relative;
    }
    .pencil>div{
    float: left;
    margin-left:15px ;

    }
    .pen{
    3px;
    height:30px ;
    background: black;
    transform-origin: center bottom;
    }
    .pen:nth-child(1){
    animation: move1 1s infinite;
    }
    .pen:nth-child(2){
    animation: move2 1s infinite;

    }
    .pen:nth-child(3){
    animation: move3 1s infinite;
    }
    .bottom{
    position: absolute;
    10px;
    height: 5px;
    background: violet;
    margin: 0 auto;
    bottom: -5px;
    animation: move4 1s infinite;
    }
    @keyframes move4{
    0%{ 10px;}
    100%{ 65px;}
    }
    @keyframes move1{
    0%{transform: rotate(0deg);}
    30%{transform: rotate(75deg);}
    100%{transform: rotate(90deg);}
    }
    @keyframes move2{
    0%{transform: rotate(0deg);}
    60%{transform: rotate(80deg);}
    100%{transform: rotate(90deg);}
    }
    @keyframes move3{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(90deg);}
    }

  • 相关阅读:
    最值
    算数平均值/加权平均值
    jdbatemplate使用
    所有正规jar包
    java代码在计算机中经历的三个阶段,反射的原理
    lambda函数式编程思想
    重写equals方法
    安全牛-弱点扫描
    安全牛-主动收集
    安全牛-被动收集
  • 原文地址:https://www.cnblogs.com/luxinyi/p/9710013.html
Copyright © 2011-2022 走看看