• 仿VS安装界面小球滑动效果


    在Visual Studio 2010后续版本的安装界面中,可以发现一组小球在滑动表示安装程序正在进行:

    于是尝试用CSS实现了一下。

    首先需要建立用来表示小球的html结构:

        <div class="container">
            <div class="circle c1"></div>    
            <div class="circle c2"></div>    
            <div class="circle c3"></div>    
            <div class="circle c4"></div>    
            <div class="circle c5"></div>
        </div>

    用5个div分别表示5个小球,并加入样式:

            .container{
                width: 500px;
                background: #000;
                height: 300px;
                position: relative;
            }
            .circle{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: rgba(255,255,255,0.6);
                position: absolute;
                left: -10px;
                top:50%;
                margin-top: -5px;
            }

    之后需要考虑小球的运动效果,于是给样式circle加入缓动样式:

            .circle{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: rgba(255,255,255,0.6);
                position: absolute;
                left: -10px;
                top:50%;
                margin-top: -5px;
                transition:left 0.4s linear;
                animation-duration: 3s;
                animation-iteration-count: infinite;
                animation-timing-function: ease;
                backface-visibility: hidden;
            }

    另外小球有先后顺序,需要使用CSS3中的keyframes来实现顺序:

            @keyframes bounce1 {
                5%{left:-3%;}
                60%{left:55%;}
                88%{left:102%;}
                100%{left:102%;}
            }
            @keyframes bounce2 {
                10%{left:-5%;}
                66%{left:52%;}
                91%{left:102%;}
                100%{left:102%;}
            }
            @keyframes bounce3 {
                15%{left:-7%;}
                72%{left:49%;}
                94%{left:102%;}
                100%{left:102%;}
            }
            @keyframes bounce4 {
                20%{left:-9%;}
                78%{left:46%;}
                97%{left:102%;}
                100%{left:102%;}
            }
            @keyframes bounce5 {
                25%{left:-11%;}
                80%{left:43%;}
                100%{left:102%;}
            }
            .c1{animation-name: bounce1;}
            .c2{animation-name: bounce2;}
            .c3{animation-name: bounce3;}
            .c4{animation-name: bounce4;}
            .c5{animation-name: bounce5;}

    实现后的效果如下:

     
  • 相关阅读:
    [实战]MVC5+EF6+MySql企业网盘实战(27)——应用列表
    [实战]MVC5+EF6+MySql企业网盘实战(26)——音乐列表
    [实战]MVC5+EF6+MySql企业网盘实战(25)——种子列表
    [实战]MVC5+EF6+MySql企业网盘实战(24)——视频列表
    [实战]MVC5+EF6+MySql企业网盘实战(23)——文档列表
    [Angularjs]angular ng-repeat与js特效加载先后导致的问题
    [实战]MVC5+EF6+MySql企业网盘实战(22)——图片列表
    [实战]MVC5+EF6+MySql企业网盘实战(21)——网盘操作日志
    await和async在一般处理程序中的使用
    mormot当作内存数据库(缓存)使用
  • 原文地址:https://www.cnblogs.com/undefined000/p/ball_slide_effect.html
Copyright © 2020-2023  润新知