类似电脑上的清空回收站，“垃圾清理”是手机上一个常见功能。
MIUI垃圾清理效果如下（垃圾收集+垃圾清理）：
这果效果很直观，也很美观。那么，怎么样实现这样的效果呢？
仔细观察一下，这些小圆球都是从远处向中心点汇聚，有两个形变动画：
由大变小
由远及近
分析之后，发现用 CSS3 动画实现还是挺简单的，效果如下，附代码。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>小米手机垃圾清理气泡效果</title>
<style>
/*
1. 画一个手机
*/
.phone{
position: relative;
width:400px;
height: 600px;
margin: 20px auto;
border: 1px solid red;
overflow: hidden;
}
/*
2. 圆球包含块，让其区中
*/
.ball{
position: absolute;
width:100px;
height: 100px;
top:calc((100% – 100px)/2);
left:calc((100% – 100px)/2)
}
/*
3 圆球
设置border-radius：50%，成为圆形
透明度 opacity: 0; 避免晚执行动画的圆出现的bug
*/
.ball b{
display: block;
width:100px;
height: 100px;
border-radius: 50%;
background-color:red;
animation: 2s collect infinite;
opacity: 0;
}
/*
4 为圆球添加动画 垃圾收集效果
初始状态为：大小不缩放，y轴偏移600px
结束状态为：大小缩放到0.1,y轴无偏移，回到原点
*/
@keyframes collect {
from {
transform: scale(1) translate(0,600px);
opacity: 1;
}
to {
transform: scale(0.1) translate(0,0);
opacity: 0;
}
}
/*
4 为圆球包含块添加变形旋转角度效果，这样里面的圆球就可以从不同角度回到原点
*/
.b2{
transform: rotate(15deg);
}
.b3{
transform: rotate(30deg);
}
.b4{
transform: rotate(45deg);
}
.b5{
transform: rotate(60deg);
}
/*
5 为圆球添加动画延时执行
*/
.b1 b{
animation-delay: 1s;
}
.b2 b{
animation-delay: 0.2s;
}
.b3 b{
animation-delay: 2.9s;
}
.b3 b{
animation-delay: 1.5s;
}
.b4 b{
animation-delay: 0.7s;
}
.b5 b{
animation-delay: 2.5s;
}
</style>
</head>
<body>
<div class=”phone”>
我是一个手机，完美。
<div class=”ball b1″>
<b></b>
</div>
<div class=”ball b2″>
<b></b>
</div>
<div class=”ball b3″>
<b></b>
</div>
<div class=”ball b4″>
<b></b>
</div>
<div class=”ball b5″>
<b></b>
</div>
</div>
<script>
var phone = document.querySelector(‘.phone’);
var ball_str = “”;
// 用脚本添加30个圆球
for (let i = 0; i < 30; i++) {
// 为每个圆球设置随机旋转角度
var deg = 270 * Math.random();
// 为每个圆球设置动画延时
var delay = Math.random() * 5 ;
// 拼接字符串
ball_str += `<div class=”ball” style=”transform:rotate(${deg}deg)”>
<b style=”animation-delay:${delay}s”></b>
</div >`;
}
// 将拼接好的字符串插入到DOM结构中，转化成DOM元素
phone.insertAdjacentHTML(‘beforeend’, ball_str);
</script>
</body>
</html>