CSS编写简单动画

灰太狼 2022-03-25 01:45 215阅读 0赞

CSS编写简单动画

开发工具与关键技术：@keyframes规则
    
    作者：廖亚星
    
    撰写时间：2019年1月16日

## 最初涉及CSS的时候，因为不会JavaScript，所以做出来的东西都是古板而没有特效的。   在CSS中，就有一个规则可以让我们自己编写一些简单的动画，这就是@keyframes规则。   以下举例为边框颜色进行变色：   首先我们在CSS中做一个简单的边框   HTML部分↓   ![在这里插入图片描述][20190118093252861.PNG]   CSS部分↓   ![在这里插入图片描述][2019011809334433.PNG]   ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70]   @keyframes部分↓   图内的animation是一个复合属性，作用为调用编写的动画及控制动画   四个值分别是：动画名称 动画时间 播放方式 无限次数   在0%，20%，40%，60%，80%，100的节点上，分别设置了不同的边框颜色，这样动画在启用后，每个时间段就会变化成不同的颜色，最后设置无限播放次数，这样边框颜色就可以一直循环变化。   0%边框颜色变化   ![在这里插入图片描述][20190118093607187.PNG]   20%边框颜色变化   ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 1]   40%边框颜色变化   ![在这里插入图片描述][20190118093523477.PNG]   60%边框颜色变化   ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 2]   80%边框颜色变化   ![在这里插入图片描述][20190118093541108.PNG]   100%边框颜色变化   ![在这里插入图片描述][20190118093550767.PNG] ##

作者：执笔诉情思  
来源：CSDN  
原文：[https://blog.csdn.net/weixin\_44540681/article/details/86533815][https_blog.csdn.net_weixin_44540681_article_details_86533815]  
版权声明：本文为博主原创文章，转载请附上博文链接！

[20190118093252861.PNG]: https://img-blog.csdnimg.cn/20190118093252861.PNG
[2019011809334433.PNG]: https://img-blog.csdnimg.cn/2019011809334433.PNG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190118093328392.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ==,size_16,color_FFFFFF,t_70
[20190118093607187.PNG]: https://img-blog.csdnimg.cn/20190118093607187.PNG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190118093513829.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ==,size_16,color_FFFFFF,t_70
[20190118093523477.PNG]: https://img-blog.csdnimg.cn/20190118093523477.PNG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190118093532991.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ==,size_16,color_FFFFFF,t_70
[20190118093541108.PNG]: https://img-blog.csdnimg.cn/20190118093541108.PNG
[20190118093550767.PNG]: /images/20220325/7923db87ed5c481cbbbc33c5d8a5262f.png
[https_blog.csdn.net_weixin_44540681_article_details_86533815]: https://blog.csdn.net/weixin_44540681/article/details/86533815