• Css 3 动画

    动画（animation）是css3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

    相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

    动画的基本使用：

    1 先定义动画

    2 再使用（调用）动画

    定义动画：用keyframes定义动画（类似定义类选择器）

    @keyframes 动画名称{

           0%{

           Width：100px；

    }

    100%{

           Width：200px；

    }

    }

    动画序列：

    1. 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
    2. 在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。
    3. 动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以任意多的样式任意多的次数
    4. 请用百分比来规定变化发生的时间，或用关键词“from“和”to“，等同于0%和100%

    使用动画：

    1. div {
    2.  
    3.             width: 200px;
    4.  
    5.             height: 200px;
    6.  
    7.             background-color: pink;
    8.  
    9.             /* 2 调用动画 */
    10.  
    11.             /* 动画名称 */
    12.  
    13.             animation-name: move;
    14.  
    15.             /* 持续时间 */
    16.  
    17.             animation-duration: 1s;
    18.  
    19.         }

     

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5.  
    6.  
    7. <head>
    8.  
    9.     <meta charset="UTF-8">
    10.  
    11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    12.  
    13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    14.  
    15.     <title>Documenttitle>
    16.  
    17.     <style>
    18.  
    19.         /* 想页面一打开，一个盒子就从左边走到右边 */
    20.  
    21.         /* 1 定义动画 */
    22.  
    23.         @keyframes move {
    24.  
    25.  
    26.  
    27.             /* 开始状态 */
    28.  
    29.             0% {
    30.  
    31.                 transform: translateX(0px);
    32.  
    33.             }
    34.  
    35.  
    36.  
    37.             /* 结束状态 */
    38.  
    39.             100% {
    40.  
    41.                 transform: translateX(1000px);
    42.  
    43.             }
    44.  
    45.         }
    46.  
    47.  
    48.  
    49.         div {
    50.  
    51.             width: 200px;
    52.  
    53.             height: 200px;
    54.  
    55.             background-color: pink;
    56.  
    57.             /* 2 调用动画 */
    58.  
    59.             /* 动画名称 */
    60.  
    61.             animation-name: move;
    62.  
    63.             /* 持续时间 */
    64.  
    65.             animation-duration: 1s;
    66.  
    67.         }
    68.  
    69.     style>
    70.  
    71. head>
    72.  
    73.  
    74.  
    75. <body>
    76.  
    77.     <div>div>
    78.  
    79. body>
    80.  
    81.  
    82.  
    83. html>

     

  • 相关阅读:
    二分查找算法【包括数组全局有序和局部有序的介绍，以及求局部最小值】
    遍历map的四种方法及Map.entry详解
    【用户画像】Redis的简介和安装
    galeracluster高可用集群异常恢复
    界面控件DevExpress WPF TreeMap，轻松可视化复杂的分层结构数据！
    C++11的内容介绍
    十六.镜头知识之工业镜头的质量判断因素
    【Mysql】查询mysql的版本
    用全域安全防范美国NSA对西工大的网络攻击
    XSS平台与cookie获取
  • 原文地址：https://blog.csdn.net/m0_51495354/article/details/128066892