仿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;}
实现后的效果如下:
//
仿VS安装界面小球滑动效果的更多相关文章
- 【Android UI设计与开发】第03期:引导界面(三)仿微信引导界面以及动画效果
基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧 ...
- Android 仿百度手机助手首页滑动效果
今天看到百度手机助手首页上的滑动效果非常nice,主要功能归结为: 1.当手指上划时,顶部搜索栏随手指移动距离而缩小到隐藏,隐藏后内容还是可以继续移动 2.手指下滑时,当显示内容达到第一个时,顶部搜索 ...
- 十六、Android 滑动效果汇总
Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...
- Axure8 实现移动端页面上下滑动效果
目前,很多Axure新人都在问如何实现界面上下滑动效果,网上相关的教程也不少,各有各的方法,但是很少有教程对滑动界限设置做出比较详细的说明,其实在工作过程中,个人发现练好Axure是很有意提升逼格的, ...
- Android 滑动效果汇总
Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...
- android仿系统Launcher界面,实现分屏,左右滑动效果(ViewSwitcher)
ViewSwitcher代表了视图切换组件, 本身继承了FrameLayout ,可以将多个View叠在一起 ,每次只显示一个组件.当程序控制从一个View切换到另个View时,ViewSwitche ...
- WPF好看的进度条实现浅谈(效果有点类似VS2012安装界面)
为了界面友好,一般的操作时间较长时,都需要增加进度条提示.由于WPF自带的进度条其实不怎么好看,而且没啥视觉效果.后来,装VS2012时,发现安装过程中进度条效果不错,于是上网查了资料.学习了Mode ...
- Fragment+ViewPager实现仿微信点击和滑动切换界面
这是在我写的新闻App中实现的界面切换 贴出切换界面的主要代码: xml代码: <span style="font-size:14px;"> <android.s ...
- 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...
随机推荐
- dedeCMS php标签使用说明和数据库查询说明
1.{dede:php}标签想要输出信息 可以直接使用printf , echo,var_dump 之类的打印出来 赋值给@me 无效 2.结合sql语句使用方法 例:{dede:php} $ro ...
- maven中的继承和聚合的关系
maven中的继承和聚合的关系:两者的目的是不一样的,聚合的目的是能够快速的构建项目,继承的目的是减少重复配置.聚合:定义一个聚合模块,然后在pom文件中添加<module></mo ...
- scrapy实战
采用scrapy实现对股票网站的爬取 功能描述: 技术路线:scrapy 目标:获取上交所和深交所所有股票名称和交易信息并存储 实例编写: 步骤1:建立工程和spider爬虫模板 步骤2:编写spid ...
- 【Visual Studio】简单内存泄漏检测方法 解决 Detected memory leaks! 问题(转)
原文转自 http://blog.csdn.net/u011430225/article/details/47840647 我的环境是: XP SP2.VS2003 最近在一个项目中, 程序退出后都出 ...
- android基本控件学习-----SeekBar&RatingBar
SeekBar(拖动条)和RatingBar(星级评分条)讲解 一.SeekBar(拖动条) (1)拖动条简单理解就是可以拖动的线,这个对我们来讲很常见,比如视频播放或者音乐播放我们拖动播放的进度,下 ...
- strcpy_s 函数的用法
strcpy_s和strcpy()函数的功能几乎是一样的. strcpy函数,就象gets函数一样,它没有方法来保证有效的缓冲区尺寸,所以它只能假定缓冲足够大来容纳要拷贝的字符串.在程序运行时,这将导 ...
- Codeforces Gym100814 F.Geometry (ACM International Collegiate Programming Contest, Egyptian Collegiate Programming Contest (2015) Arab Academy for Science and Technology)
这个题真的是超级超级水啊,哈哈哈哈哈哈.不要被题面吓到,emnnn,就这样... 代码: 1 #include<iostream> 2 #include<cstring> 3 ...
- ansible 手册
ansible 官方文档:https://docs.ansible.com/ansible/latest/index.html ansible 中文入门:http://getansible.com/ ...
- 2016北京集训测试赛(九)Problem C: 狂飙突进的幻想乡
Solution 我们发现, 对于一条路径来说, 花费总时间为\(ap + q\), 其中\(p\)和\(q\)为定值. 对于每个点, 我们有多条路径可以到达, 因此对于每个区间中的\(a\)我们可以 ...
- Data-structures-and-algorithms-interview-questions-and-their-solutions
https://techiedelight.quora.com/500-Data-structures-and-algorithms-interview-questions-and-their-sol ...