仿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 ...
随机推荐
- VMWare VMNet 8 的配置使用
网上有很多讲解VMWare网络原理的文章,我在这里就不在赘述,有兴趣的朋友可以自己搜 本章主要介绍下我们使用VM最常用的两种网络模式,VMNet 0 和 VMNet 8 本文均为原创,如需转载请标明, ...
- 挑战程序设计竞赛》P345 观看计划
<挑战程序设计竞赛>P345 观看计划 题意:一周一共有M个单位的时间.一共有N部动画在每周si时 ...
- pat 团体天梯 L3-003. 社交集群
L3-003. 社交集群 时间限制 1000 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 在社交网络平台注册时,用户通常会输入自己的兴趣爱好, ...
- Bits
先%SY... 课件链接 求1的个数 以32位整数为例子,最暴力的方法就是一位一位的数,但是这样太不优美... 以下是优美的方法... 这个问题其实就是二进制求和... 我们考虑分治的思想...每一次 ...
- kernel thread vs user thread
The most important difference is they use different memory, the kernel mode thread can access any ke ...
- 牛客网 牛客小白月赛2 E.是是非非-尼姆博奕
E.是是非非 链接:https://www.nowcoder.com/acm/contest/86/E 这个题就是尼姆博奕(我的队友小可爱很擅长这个) 代码: 1 //E 2 #include< ...
- Jmeter脚本两种录制方式
Jmeter 是一个非常流行的性能测试工具,虽然与LoadRunner相比有很多不足,比如:它结果分析能力没有LoadRunner详细:很它的优点也有很多: l 开源,他是一款开源的免 ...
- 好用的 HTTP模块SuperAgent
SuperAgent 最近在写爬虫,看了下node里面有啥关于ajax的模块,发现superagent这个模块灰常的好用.好东西要和大家分享,话不多说,开始吧- 什么是SuperAgent super ...
- [CF665F]Four Divisors
题目大意: 给定$n(n\leq10^{11})$,求$\displaystyle\sum_{i=1}^n[\tau(i)=4]$. 思路: 设$p,q$为不相等的质数,则满足$\tau(i)=4$的 ...
- JSP介绍与语法-java之JSP学习第一天(非原创)
文章大纲 一.JSP 简介二.JSP 生命周期三.JSP 语法四.学习资料下载五.参考文章 一.JSP 简介 1. 什么是Java Server Pages? JSP全称Java Server P ...