前端深入之css篇丨初探【transform】，手把手带你实现1024程序员节动画

原文:前端深入之css篇丨初探【transform】，手把手带你实现1024程序员节动画

写在前面

马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？

说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它可以减少代码量、提高性能。

值此1024程序员佳节之际，我特此推出供同学们学习的动画小案例，这个案例非常简单，但是他可有帮我们巩固上一篇学的animation，并且能够让你对后面要学习的animation有一个基本的认识。

话不多说，跟我开始吧。

1024动画案例

前端深入之css篇丨初探【transform】，手把手带你实现1024程序员节动画这就是我们最终要实现的效果，还是比较简单的，拿来当做一个入门动画的小案例再好不过了。

搭建静态页

<style>
    .outBox ul{
        display: flex;
    }
    .outBox li{
        list-style: none;
        margin: 20px;
        font-size: 120px;
        position: relative;
        top: 0px;
        color:#fff;
    }
</style>
<body>
    <div class="outBox">
        <ul>
            <li>1</li>
            <li>0</li>
            <li>2</li>
            <li>4</li>
        </ul>
    </div>
</body>

写完之后你就会在屏幕上得到1024四个大字，因为我们要做凭空出现的跳跃效果，所以我们把它的颜色设置为了白色。

制作简单动画

前端深入之css篇丨初探【transform】，手把手带你实现1024程序员节动画

.outBox li:nth-child(1){
    animation: myMove 1.5s ease alternate infinite ;
}
.outBox li:nth-child(2){
    animation: myMove 1.5s ease 0.5s alternate infinite ;
}
.outBox li:nth-child(3){
    animation: myMove 1.5s ease 1s alternate infinite ;
}
.outBox li:nth-child(4){
    animation: myMove 1.5s ease 1.5s alternate infinite ;
}
@keyframes myMove{
    0%{
        color: rgb(229, 255, 80);
        top: 160px;
    }
    50%{
        color:rgb(2, 150, 200);
        top: 0px;

    }
    100%{
        color: rgb(255, 106, 198);
        top: 160px;

    }
}

加入这些代码，就会使每个数字都产生上下的动画了，然后每个数字依次跳出来展示，并在其中变换颜色。由于都是上一个文章的内容，在这里我就不再赘述了。

最终效果

@keyframes myMove{
    0%{
        color: rgb(229, 255, 80);
        top: 160px;
        transform: rotateY(0deg) scale(1.0);
    }
    50%{
        color:rgb(2, 150, 200);
        top: 0px;
        transform: rotateY(180deg) scale(1.5);
    }
    100%{
        color: rgb(255, 106, 198);
        top: 160px;
        transform: rotateY(0deg) scale(1.0);
    }
}

然后再在每个状态里加入transform: rotateY(xxdeg) scale(1.0);就可以实现文章开始的图片效果了。

这里我们接触到了transform属性，也就是变形属性，其中rotateY(0deg)的意思是以Y轴为对称轴进行旋转，括号中间的内容是旋转角度。中scale(1.0)是操作放大缩小用的，括号中的内容负责大小。放到案例中的意思就是开始默认大小、默认角度，运行到中间文字左右对称翻转并且变大，再到运行结束改变成初始阶段。

结论

看完这篇文章你会发现实现一个动画其实很简单，尤其是在你学会了animation之后，上道了学习transform自然简单。translate（移动）以及transform（变形）其实并不是制作动画的，只是变形和移动在动画中经常会使用到，而且人们经常把这几个属性搞混，所以我拿他们一起来进行了讲解。这个案例只是响应1024推出的练习案例，希望和我一起在学习css动画的同学可以独自写一写代码，相信你们一定能够对动画有自己的理解的，同时对接下来的学习也会起到很大的帮助。跟进我的脚步吧，跟我一起在2020年前掌握css动画！

结语

以上就是本文章的全部内容了，如果有不正确的地方欢迎指正。

感谢您的阅读，如果感觉有用不妨点赞/转发。

前端深入系列是一个踩坑系列，是由我本人对工作和学习中所遇到的问题和踩过的坑的一个探索与总结，在此记录分享出去，同时也是对自我技能的一个反思和追问。

前端路漫，踩坑不断。

前端深入系列持续更新中……

以上2019-10-24。

前端深入之css篇丨初探【transform】，手把手带你实现1024程序员节动画

写在前面

1024动画案例

搭建静态页

制作简单动画

最终效果

结论

结语

相关推荐