视频教程: CSS3 实现手机酷炫效果_哔哩哔哩 (゜ - ゜) つロ 干杯~-bilibili https://www.bilibili.com/video/av78061181
类似电脑上的清空回收站,"垃圾清理" 是手机上一个常见功能.
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>
来源: http://www.mzh.ren/css3-miui-demo.html