<!DOCTYPE html>
<html>
<head>
<title>css模拟手机安装图标效果</title>
<meta charset="UTF-8">
<style>
*{/*外层margin,padding设置0*/
margin:0
padding:0
}
#abox{/*外层大容器相对定位，宽度高度各100px*/
position:relative
width:100px
height:100px
margin-left:100px
margin-top:100px
}
#abox::after{/*伪元素设置安装中字样，绑定动画myfirst3，安装完毕后安装中字样消失*/
content:""
display:block
width:100%
position:absolute
color:white
bottom:0
left:0
text-align:center
font-size:14px
font-weight:bold
animation:myfirst3 10s
-webkit-animation:myfirst3 10s/* Safari and Chrome */
}
@keyframes myfirst3/*安装中文字动画*/
{
from {
content:"安装中"
}
to {
content:""
}
}
#box1{/*底层图片，被透明的黑色层遮住*/
position:relative
width:100px
height:100px
background:url("123.png")
background-size:100% 100%
}
#box1::after{/*设置一个伪元素，让其绑定一个动画，透明度在动画完毕后变得完全透明*/
content:""
display:block
position:absolute
width:100%
height:100%
top:0
left:0
animation:myfirst2 10s
-webkit-animation:myfirst2 10s/* Safari and Chrome */
}
@keyframes myfirst2
{
from {
background:black
filter:alpha(Opacity=60)
-moz-opacity:0.6
opacity:0.6
}
to {
background:none
filter:alpha(Opacity=0)
-moz-opacity:0
opacity:0
}
}
#box2{/*黑色层容器，绝对定位*/
position:absolute
width:60px
height:60px
top:20px
left:20px
overflow:hidden
border-radius:50%
}
#box2 img{/*插入一张图片，让其可以覆盖背景图片，且显示出效果*/
width:100px
height:100px
margin-top:-20px
margin-left:-20px
}
#box3{/*扇形黑色容器变化容器，注意控制left和top让其居中*/
position:absolute
width:46px
height:46px
left:7px
top:7px
border-radius:50%
animation:myfirst 3s/*绑定扇形变化动画效果*/
-webkit-animation:myfirst 3s/* Safari and Chrome */
}
@keyframes myfirst/*扇形黑色容器变化动画,利用css的裁剪功能模拟扇形变化*/
{
0%{
clip-path: polygon(50% 50%, 68% 0, 100% 0, 100% 100%, 0 100%, 0 0, 52% 0)
filter:alpha(Opacity=60)
-moz-opacity:0.6
opacity:0.6
background:black
}
10%{
clip-path: polygon(50% 50%, 100% 26%, 100% 45%, 100% 100%, 0 100%, 0 0, 52% 0)
filter:alpha(Opacity=60)
-moz-opacity:0.6
opacity:0.6
background:black
}
20%{
clip-path: polygon(50% 50%, 100% 71%, 100% 86%, 100% 100%, 0 100%, 0 0, 52% 0)
filter:alpha(Opacity=60)
-moz-opacity:0.6
opacity:0.6
background:black
}
30%{
clip-path: polygon(50% 50%, 100% 100%, 58% 100%, 34% 100%, 0 100%, 0 0, 52% 0)
filter:alpha(Opacity=60)
-moz-opacity:0.6
opacity:0.6
background:black
}
40%{
clip-path: polygon(50% 50%, 59% 100%, 7% 100%, 0 100%, 0 74%, 0 0, 52% 0)
filter:alpha(Opacity=60)
-moz-opacity:0.6
opacity:0.6
background:black
}
50%{
clip-path: polygon(50% 50%, 19% 100%, 0 100%, 0 58%, 0 35%, 0 0, 52% 0)
filter:alpha(Opacity=60)
-moz-opacity:0.6
opacity:0.6
background:black
}
60%{
clip-path: polygon(50% 50%, 0 78%, 0 51%, 0 29%, 0 18%, 0 0, 52% 0)
filter:alpha(Opacity=60)
-moz-opacity:0.6
opacity:0.6
background:black
}
70%{
clip-path: polygon(50% 50%, 0 40%, 0 27%, 0 13%, 0 0, 28% 0, 52% 0)
filter:alpha(Opacity=60)
-moz-opacity:0.6
opacity:0.6
background:black
}
80%{
clip-path: polygon(50% 50%, 0 11%, 0 0, 13% 0, 25% 0, 38% 0, 52% 0)
filter:alpha(Opacity=60)
-moz-opacity:0.6
opacity:0.6
background:black
}
90%{
clip-path: polygon(50% 50%, 7% 0, 15% 0, 23% 0, 32% 0, 41% 0, 52% 0)
filter:alpha(Opacity=60)
-moz-opacity:0.6
opacity:0.6
background:black
}
100%{
clip-path: polygon(50% 50%, 52% 0, 52% 0, 52% 0, 51% 0, 52% 0, 52% 0)
filter:alpha(Opacity=0)
-moz-opacity:0
opacity:0
background:none
}
}
</style>
</head>
<body>
<div id="abox"><!--外层容器-->
<div id="box1"></div><!---第一层背景容器-->
<div id="box2"><!--第二层图片容器-->
<div id="box3"></div>
<img src="123.png">
</div>
</div>
</body>
</html>
1、写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。
2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill 和.bar-fill的span标签。
<div class="container"><div class="title plain">Plain</div>
<div class="bar">
<span class="bar-unfill">
<span class="bar-fill"></span>
</span>
</div>
</div>
3.简单的进度条的CSS代码.container 类里将 width 定义为 30% 使进度条能够自适应。放一些简单的 border-radius 之类的属性在我们的 .title 类里以修改顶部和底部的左边的边框弧度，创建一个简单明了的平板式设计。
.container {width:30%
margin:0 auto
}
.title {
background:#545965
color:#fff
padding:15px
float:left
position:relative
-webkit-border-top-left-radius:5px
-webkit-border-bottom-left-radius:5px
-moz-border-radius-topleft:5px
-moz-border-radius-bottomleft:5px
border-top-left-radius:5px
border-bottom-left-radius:5px
}
4.首先建一个白色的背景
.bar-unfill {height:15pxdisplay:blockbackground:#fffwidth:100%border-radius:8px}5.定义进度条的样式，先令他的宽度为 100% ，因为这也会应用于定义和未定义的部分。所以在我们的 .bar-fill 的类里，令他的宽度为 0 作为起始的宽度，添加CSS3的 transition 属性使动画效果更加流畅，最后，我们将添加CSS3里的 animation 属性，定义动画的名字，和 duration 和 animation-iteration-count 属性。
.bar-fill {height:15px
display:block
background:#45c9a5
width:0
border-radius:8px
-webkit-transition:width .8s ease
-moz-transition:width .8s ease
transition:width .8s ease
-webkit-animation:progressbar 7s infinite
animation:progressbar 7s infinite
}
6.使用CSS3里的 @keyframe 规则来设置宽度从 0 变化到 100% 。你也能定制你自己喜欢的变化。
@-webkit-keyframes progressbar {from {
width:0
}
to {
width:100%
}
}
/* Standard syntax */
@keyframes progressbar {
from {
width:0
}
to {
width:100%
}
}
7.条纹进度条，应该把 .bar-fill 重新命名为 .bar-fill-stripes 。使用 backgrou-image 属性里的 linear-gradient 同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码：
.bar-fill-stripes {height:15px
display:block
background:#e74c3c
width:0
border-radius:8px
background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)
-webkit-transition:width .8s ease
-moz-transition:width .8s ease
transition:width .8s ease
-webkit-animation:progressbar 7s infinite
animation:progressbar 7s infinite
}
追踪
<div class="container"><div class="title">Tracker</div>
<div class="bar">
<span class="bar-unfill">
<span class="bar-fill-tracker"></span>
<span class="track-wrap">
<span class="track"></span>
</span>
</span>
</div>
</div>
8.最后产生动画效果
.track-wrap {position:relative
top:-18px
-webkit-animation:progressbar2 7s infinite
animation:progressbar2 7s infinite
}
.track {
height:20px
display:block
background:#e74c3c
width:20px
border-radius:10px
position:relative
left:-12px
}
@-webkit-keyframes progressbar2 {
from {
left:0
}
to {
left:100%
}
}
/* Standard syntax */
@keyframes progressbar2 {
from {
left:0
}
to {
left:100%
}
}
