仿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;}

实现后的效果如下:

时间: 03-16

仿VS安装界面小球滑动效果的相关文章

仿QQ5.3.1左右滑动效果实现

工作之余无聊,研究一下QQ的特效,不过还是有些区别的! 效果图如下: 左滑: 右滑: 滑动是实现主要是HorizontalScrollView来实现的,可能会与qq的有些区别,但是大致效果还是出来了! 区别: 1.可以左右滑动,qq的不可以右滑. 2.左滑和右滑的背景切换效果和qq的有区别 3.还有些细节上的差别 主要实现代码如下: import android.content.Context; import android.content.res.TypedArray; import andr

十六、Android 滑动效果汇总

Android 滑动效果入门篇(一)-- ViewFlipper Android 滑动效果入门篇(二)-- Gallery Android 滑动效果基础篇(三)-- Gallery仿图像集浏览 Android 滑动效果基础篇(四)-- Gallery + GridView Android 滑动效果进阶篇(五)-- 3D旋转 Android 滑动效果进阶篇(六)-- 倒影效果 ViewFilpper 是Android官方提供的一个View容器类,继承于ViewAnimator类,用于实现页面切换,

android仿系统Launcher界面,实现分屏,左右滑动效果(ViewSwitcher)

ViewSwitcher代表了视图切换组件, 本身继承了FrameLayout ,可以将多个View叠在一起 ,每次只显示一个组件.当程序控制从一个View切换到另个View时,ViewSwitcher 支持指定动画效果. 为了给ViewSwitcher 添加多个组件, 一般通过ViewSwitcher 的setFactory 方法为止设置ViewFactory ,并由ViewFactory为之创建View 即可. 下面通过一个实例来介绍 ViewSwitcher的用法.(仿Android系统L

WPF好看的进度条实现浅谈(效果有点类似VS2012安装界面)

为了界面友好,一般的操作时间较长时,都需要增加进度条提示.由于WPF自带的进度条其实不怎么好看,而且没啥视觉效果.后来,装VS2012时,发现安装过程中进度条效果不错,于是上网查了资料.学习了ModernUI(开源的),地址:https://github.com/firstfloorsoftware/mui. 后来,做了尝试写了个Demo,效果不错.另外,专门录制了tif文件,方便大家看到效果.废话不多说,先展示效果: 一.效果展示 A.VS2012安装界面图: B.个人尝试Demo效果图:  

原始战争之主界面滑动效果

简介:在弄一个横版的游戏,需要一个随鼠标左右滑动的功能,最终做了一个拖动的效果. 鼠标左右移动界面也滑动 实际做的时候,搜了一下没有滑动的方案,那就假想游戏界面长度大于窗口界面(类比给卷轴加游标),然后根据鼠标左右移动事件,去计算卷轴应该在的位置,然后更新界面.如果左右移动处理麻烦(滚动速度太快或太慢,现在如果玩红警95就存在鼠标移动速度问题),也可以在血条中间加上一个滑动条,来精确的控制位置. 打算用图片来模拟卷轴大小 来用一个光头的图片来模拟的时候,发现一个问题: QLabel设置大小无效问

仿一个好玩的滑动效果

起因 昨天跑步的时候,看到一个app(华为手机自带的运动健康)上的滑动效果很有意思,回来之后就想着,能不能在dom上实现一下,于是有了这篇文章.首先看一下效果图,滑动下面的绿色滑块可以看到效果: 贴出app上的效果图,模仿效果可以说是差强人意吧: 实现 其实原理很简单,就是在小圆点移动时,计算数字和小圆点的距离,来控制数字的上升和下降. 首先,要使小圆点跟随鼠标移动起来:代码如下: slide.addEventListener('mousedown', function(e){ e.preven

Android ActionBar应用实战,高仿微信主界面的设计

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Andr

Android利用ViewPager仿微信主界面-android学习之旅(78)

首先是介绍ViewPager这个控件 ,这个控件需要pagerAdapter作为容器来提供数据,同时pagerAdapter的数据源是View数组 效果图如下 部分代码如下,实现如下的方法 mPagerAdapter = new PagerAdapter(){ @Override public int getCount() { return mViews.size(); } @Override public boolean isViewFromObject(View view, Object o

本app(仿手机支付宝界面)ios源码

本app(仿手机支付宝界面)主要演示了: 动态显示splashimage如何控制手势密码(AES加密保存数据)如何控制viewcontroller之间的跳转,viewcontroller的代理控制.TabbarController与navigationControlle结合使用动态显示splashimage定制tableViewController自定义UIButton 效果图本app已打包发布到蒲公英平台,网址:http://www.pgyer.com/syD6.可直接安装(无需越狱)查看效果