<!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>
jQuery的可以实现：1.fadeIn（速度，[回调]）通过改变所有匹配元素的不透明度来实现淡入效果，并在动画可选地触发一个回调函数后完成。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。
参数速度（字符串，数字）：三种预定速度字符串（“慢”，“正常”或“快速”）长的毫秒数值（如：1000）的一个表示动画或
回调（功能）：（可选）（可选）例如600毫秒缓慢淡入一段
代码：$（“P”）淡入（“慢“）
用200毫秒快速褪色的段落，然后会弹出一个对话框jQuery代码：。“动画完成”$（“P”）淡入（“快”，函数（）{
警报（ ）
}）
2.fadeOut（速度，[回调]）通过改变不透明度来实现所有匹配淡入淡出效果的元素，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。
参数速度（字符串，数字）：三种预定速度字符串（“慢”，“正常”或“快速”）长的毫秒数值（如：1000）的一个表示动画或
回调（功能）：（可选）功能例如与段落600毫秒缓慢褪色
代码：$（“P”）。淡出（“慢”）
200毫秒段对话
代码后迅速褪色。 $（“P”）淡出（“快”，函数（）{
警报（“动画完成。”）
}）
3.fadeTo（速度，透明度，[回调]），所有匹配的元素逐步调整到指定的不透明度，并可选地触发一个回调函数完成动画后的不透明度。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。
参数速度（字符串，数字）：表示动画或
不透明度（：三种预定速度弦长的毫秒值（1000例）（“慢”，“正常”或“快速”）之一号）：调整0和1）的回调（功能）之间的不透明度值（数。 （可选）功能 600毫秒，以缓慢调整到0.66段，能见度的透明度有关的
码2/3。 $（“p”）的fadeTo（“慢”，0.66）$（“P”）。fadeTo（“慢”，0.66）
同款200毫秒快速调整到0.25，能见度约1/4的透明度，然后会弹出一个对话框jQuery代码：$（“P”）。 fadeTo（“快”，0.25，函数（）{
警报（）“动画完成。”
}）
transition-timing-function。和transition动画一样，animation动画也是CSS3动画的一种，这类动画可以理解为是一种关键帧动画，它可以预先为动画设置多个节点，在每个节点中含有不同的状态属性，通过使用animation动画我们可以得到更为复杂的动画效果。
注意：transition是为页面元素设置某个需要产生动画效果的属性，如宽度（width）、高度（height）、透明度（opacity），甚至3D旋转等，并使得这些属性的值在发生变化时产生相应的过渡效果。我们常常在制作类似按钮鼠标经过和移出效果时使用transition。
通俗地说，transition是简化版的CSS3动画，而animation则是强化版的CSS3动画。在日常开发中transition的使用频率更高一些，我们往往只有在遇到transition无法解决的问题时，才会转而使用animation。
