教你用三分钟写一个动画

前言

不断尝试才能更好成长！

图片来自网络，侵权请联系删除！

代码

• CSS

body {
    margin: 0;
    padding: 0;
    text-align: center;
}

.container {
    position: relative;
    padding: 0;
    width: 750px;
    height: 400px;
    margin: 100px auto;
    overflow: hidden;
    text-align: center;
    background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=361929698,4229807279&fm=26&gp=0.jpg) left top no-repeat;
}

.box1 {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    background-color: rgba(0, 211, 233, 0.2);
    animation: anim1 10s infinite;
}

@keyframes anim1 {
    from {
        
        width: 60px;
        height: 60px;
    }

    to {
        width: 100px height: 100px;
    }
}


.box2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 250px;
    border-radius: 12px;
    background-color: rgba(0, 211, 233, 0.2);
    animation: anim2 10s infinite;
}

@keyframes anim2 {
    from {
        width: 100px;
        height:100px;
    }

    to {
        width:250px height:250px;
    }
}

.box3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 533px;
    height: 300px;
    border-radius: 20px;
    background-color: rgba(0, 211, 233, 0.1);
    animation: anim3 10s infinite;
}

@keyframes anim3 {
    from {
        width: 144px;
        height: 144px;
    }

    to {
        width: 533px height: 300px;
    }
}

• HTML

<div class="container">
    <div class="box3">
        <div class="box2">
            <div class="box1"></div>
        </div>
    </div>
</div>

效果展示

图1

总结

下了一款录频软件，由于还不是特别会操作，就只能先展示静态图片了。其实用到的 东西也不多。值得注意的就是以下两个知识点

//anim3 为调用的动画名字
//10s 动画进行的时间
//infinite 动画无限次重复 
animation: anim3 10s infinite;

//from to 动画从哪里到哪里
@keyframes anim3 {
    from {
        width: 144px;
        height: 144px;
    }

    to {
        width: 533px height: 300px;
    }
}

(本文适合初学者，如果你是大佬级别的人物，我也欢迎指教！)