首页 > 其他分享> > [CSS3动画系列教程] CSS3 动画实现手机精美效果

[CSS3动画系列教程] CSS3 动画实现手机精美效果

2021-05-18 15:53:04 作者：互联网

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

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>

标签：CSS3,动画,教程,100px,transform,delay,圆球,animation
来源： https://blog.51cto.com/u_15127658/2784043