• CSS从入门到精通——动画:CSS3动画执行次数和逆向播放


    目录

    任务描述

    相关知识

    动画执行次数

    动画反向播放

    编程要求

    任务描述

    本关任务:用 CSS3 实现loading效果。效果图如下:

    相关知识

    为了完成本关任务,你需要掌握:1.动画执行次数,2.动画反向播放。

    需要实现的效果如下:

    动画执行次数

    动画从开始到结束(0%100%)称为一个动画的周期,也就是说,动画执行了一次。

    基本的结构如下(这里省略了部分样式):

    1. <div class="box">
    2. <span>0%span>
    3. <span>100%span>
    4. div>
    5. .box{ width: 0px;}

    效果图如下:

    先创建一个动画名称为progress的动画。代码如下:

    1. @keyframes progress{
    2. 0% { width: 0px; }
    3. 100%{ width: 300px; }
    4. }

    然后把这个动画绑定到class="box"元素上就可以了。代码如下:

    1. .box{
    2. animation: progress 2s ease;
    3. }

    效果图如下:

    可以看出,这里动画只执行了一次。如何让它执行多次呢?这里用到animation-iteration-count属性,它的值有:

    • n, 表示动画播放次数的数值;
    • infinite,表示动画无限次播放;

    这里先执行3次,代码如下:

    1. .box{
    2. animation: progress 2s ease 3;
    3. }

    效果如下:

    动画反向播放

    上面进度条100%0%时是直接消失的,怎么让它逐渐消失呢?

    第一种思路:把从0%100%100%0%看作动画的一个周期。这时总完成时间就会翻倍

    实现代码如下:

    1. @keyframes progress{
    2. 0% { width: 0px;}
    3. 50%{ width: 300px;}
    4. 100%{ width: 0px;}
    5. }
    6. .box{
    7. animation: progress 4s ease;
    8. }

    效果如下:

    因为这里的动画比较简单,这样写没什么问题。但动画效果比较复杂时,需要计算的东西就比较多了,也比较麻烦。

    第二种思路:利用属性animation-direction,它规定了动画是否在下一周期逆向播放。它的值有:

    • normal,默认值,表示正常播放;
    • reverse,表示动画反向播放;
    • alternate,动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放;

    可以利用animation-direction: alternate; 让动画第二次反向播放。

    实现代码如下:

    1. .box{
    2. animation: progress 2s ease 3 alternate;
    3. }

    效果如下:

    注意:alternate这个值在 动画次数≥2 的时候才有效果;

    编程要求

    根据提示,在右侧编辑器补充代码,实现loading效果。要求如下:

    • 动画名称为loading
    • 动画一次完成的时间:外面的为1s,里面的为1.5s
    • 动画的速度曲线为linear;
    • 动画完成的次数为 无限次;
    • 外面的顺时针旋转,里面的逆时针旋转;

    提示:

    • animation-direction: reverse;可以实现动画反向播放;
    • 注意动画简写的顺序;

    为了方便评测, CSS 都是需要以分号;结尾的。

    效果如下:

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Document
    6. title>
    7. <style>
    8. *{
    9. margin: 0;
    10. padding: 0;
    11. }
    12. @keyframes loading{
    13. 0%{ transform: rotate(0deg); }
    14. 100%{ transform: rotate(360deg); }
    15. }
    16. .box{
    17. position: relative;
    18. width: 100%;
    19. height: auto;
    20. background: black;
    21. }
    22. .big{
    23. width: 40px;
    24. height: 40px;
    25. border: 5px solid red;
    26. border-radius: 50%;
    27. border-color: red red transparent transparent;
    28. position: absolute;
    29. left: 100px;
    30. top: 100px;
    31. /************ Begin **************/
    32. animation:loading 1s linear infinite;
    33. /************* End ***************/
    34. }
    35. .small{
    36. width: 20px;
    37. height: 20px;
    38. border: 5px solid red;
    39. border-radius: 50%;
    40. border-color: transparent transparent red red;
    41. position: absolute;
    42. left: 110px;
    43. top: 110px;
    44. /************ Begin **************/
    45. animation:loading 1.5s linear infinite reverse;
    46. /************* End ***************/
    47. }
    48. style>
    49. head>
    50. <body>
    51. <div class="box">
    52. <div class="big">div>
    53. <div class="small">div>
    54. div>
    55. body>
    56. html>

     

  • 相关阅读:
    [博客园首发] 写连载博客,历时1410天出版书籍《物联网软件架构设计与实现》
    智能合约漏洞案例,Palmswap 90 万美元漏洞分析
    使用Visual Studio Code 进行Python编程(一)
    Linux 命令行快键键
    电脑重装系统苹果电脑开不了机的原因分析
    2022/11/21[指针] 多维数组与指针的联系
    C const
    保姆级搭建Mysql 并进行视图可视化操作
    【计算机毕业设计】音乐管理系统
    部署vue项目到阿里云服务器
  • 原文地址:https://blog.csdn.net/m0_73614626/article/details/139711754