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

实现后的效果如下:

 

//

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

  1. 【Android UI设计与开发】第03期:引导界面(三)仿微信引导界面以及动画效果

    基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧 ...

  2. Android 仿百度手机助手首页滑动效果

    今天看到百度手机助手首页上的滑动效果非常nice,主要功能归结为: 1.当手指上划时,顶部搜索栏随手指移动距离而缩小到隐藏,隐藏后内容还是可以继续移动 2.手指下滑时,当显示内容达到第一个时,顶部搜索 ...

  3. 十六、Android 滑动效果汇总

    Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...

  4. Axure8 实现移动端页面上下滑动效果

    目前,很多Axure新人都在问如何实现界面上下滑动效果,网上相关的教程也不少,各有各的方法,但是很少有教程对滑动界限设置做出比较详细的说明,其实在工作过程中,个人发现练好Axure是很有意提升逼格的, ...

  5. Android 滑动效果汇总

    Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...

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

    ViewSwitcher代表了视图切换组件, 本身继承了FrameLayout ,可以将多个View叠在一起 ,每次只显示一个组件.当程序控制从一个View切换到另个View时,ViewSwitche ...

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

    为了界面友好,一般的操作时间较长时,都需要增加进度条提示.由于WPF自带的进度条其实不怎么好看,而且没啥视觉效果.后来,装VS2012时,发现安装过程中进度条效果不错,于是上网查了资料.学习了Mode ...

  8. Fragment+ViewPager实现仿微信点击和滑动切换界面

    这是在我写的新闻App中实现的界面切换 贴出切换界面的主要代码: xml代码: <span style="font-size:14px;"> <android.s ...

  9. 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果

    本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...

随机推荐

  1. 【CF1043D】Mysterious Crime(贡献)

    题意:给定m个人,每个人有n个数字且每个人的所有数字都是一个n的排列,求有多少种方案去掉某个前缀和后缀后m个人剩余的部分相等 m<=10,n<=1e5 思路:考虑极长的一段连续匹配的串,因 ...

  2. Entity Framework context per request

    原文发布时间为:2011-09-24 -- 来源于本人的百度文章 [由搬家工具导入] http://www.blog.cyberkinetx.com/2011/05/15/entity-framewo ...

  3. JDBC连接池&DBUtils使用

    使用连接池改造JDBC的工具类: 1.1.1          需求: 传统JDBC的操作,对连接的对象销毁不是特别好.每次创建和销毁连接都是需要花费时间.可以使用连接池优化的程序. * 在程序开始的 ...

  4. [翻译][Nokogiri官方教程] 解析HTML/XML文档 / Parsing an HTML/XML Document

    From a String From a File From the Internet Parse Options Encoding 原文: Parsing an HTML/XML Document ...

  5. hadoop(三)HDFS 文件系统

    Hadoop 附带了一个名为 HDFS(Hadoop 分布式文件系统)的分布式文件系统,专门 存储超大数据文件,为整个 Hadoop 生态圈提供了基础的存储服务. 本章内容: 1) HDFS 文件系统 ...

  6. 解决IE6的PNG透明

    http://www.jb51.net/article/35669.htm http://blog.csdn.net/mosliang/article/details/6760028

  7. Cryptography I 学习笔记 --- 总结

    在b站上大概的看完了Dan Boneh的密码学,对现代密码学总算有了一个粗浅的认识. 总算能在纸上手写RSA公式并且证明之了,蛤蛤. 总体的感触就是,现代密码学是一个非常博大精深的体系,我等程序员最重 ...

  8. 调参tips

    对于一个模型,都可以从以下几个方面进行调参: 1. 对weight和bias进行初始化(效果很好,一般都可以提升1-2%) Point 1 (CNN): for conv in self.convs1 ...

  9. Create Data Block Based On From Clause Query In Oracle Forms

    Example is given below to create a data block based on From Clause query in Oracle Forms. The follow ...

  10. 评分条RatingBar Android

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...