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

时间 2019-11-07

标签前端深刻 css 初探 transform 手把手实现程序员动画栏目 CSS 繁體版

原文原文链接

写在前面

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

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

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

话很少说，跟我开始吧。css3

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四个大字，由于咱们要作凭空出现的跳跃效果，因此咱们把它的颜色设置为了白色。程序员

制做简单动画

.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;

    }
}

复制代码

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

最终效果

@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动画！学习

结语

以上就是本文章的所有内容了，若是有不正确的地方欢迎指正。flex

感谢您的阅读，若是感受有用不妨点赞/转发。

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

前端路漫，踩坑不断。

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

以上2019-10-24。