首页 > 代码库 > 仿VS安装界面小球滑动效果
仿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;}
实现后的效果如下：
<style></style>
仿VS安装界面小球滑动效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。