CSS3 动画实现MIUI精美效果

[广告]京东京造 K2蓝牙双模机械键盘 背光84键有线/蓝牙无线双模


视频教程:CSS3实现手机酷炫效果_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

类似电脑上的清空回收站,“垃圾清理”是手机上一个常见功能。

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>

码中人 微信公众号

关注微信公众号

码中人 微信公众号